About text selection in web pages and counting the length of selected text

*

Hello everyone , I am Pinellia ternata , A sand carving programmer who just started writing . If you like my article , Can pay attention to give the thumbs-up Add me WeChat ：「frontendpicker」, Learn to communicate together , Become a better Engineer ～ Official account ：** Pinellia ternata **, Learn more about the front end ! Am I Explore the new world ！

*

*

Link to the original text ==>http://sylblog.xin/archives/100

*

Preface

I opened the code I had knocked down in the past , This damn soulless code , Every function that's crooked says “ Copy and paste ” Four words . I can't sleep , After a close look at midnight , To see the words in the seam , Two words are written all over the screen “ Vegetable dog ”！！！

—— Lu xun （ false ）

As an orientation CV Of CSS+JS The programmer , What I do most often , Just assign and paste , I learned something before . There is no systematic learning .CSS There are probably two attributes about text selection in ！ One **::selection** , the other one 「user-select」

::selection

::selction It is used to emphasize the content selected by the user by clicking or dragging the mouse .

It's easy to use ：

 p::selection {
        color: rgba(255, 255, 0, 1);
        background-color: rgba(128, 128, 192, 1);
}

image-20211126221740746

at present ::selection Only the following properties are supported ：

• color
• background-color
• text-decoration And its related properties
• text-shadow
• stroke-color, fill-color and stroke-width

Although the supported properties are , However, we can use these attributes to make some interesting choices .

Example - Selected emphasis

Mainly used text-shadow Shadow the text , When the text is selected , Show effect .

  p::selection {
        color: rgba(255, 255, 0, 1);
        background-color: rgba(128, 128, 192, 1);
        text-shadow:  -1px -1px 0 #000,  1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }

image-20211126223223119

「PS: more text-shadow Produced text effect , You can see ：https://juejin.cn/post/7028956229925863455」

user-select

user-select It mainly controls the selection of users , For example, text cannot be selected , Partial selection, etc ！

The main attribute values are ：

none, auto, text, contain, all

「 For specific usage, you can see ：https://juejin.cn/post/7022939685978636302」

run into sb. pointer-events:none;

When the element is set pointer-events:none, Causes the element to never become a mouse event target. I thought at first , Even when the element is set user-select Is selectable , as long as pointer-events:none; In the end, you still can't select . But the result is the opposite :

The following code , Setting elements can all be selected , however pointer-events:none;. The end result of the experiment is , Text can be selected .

p::selection {
    pointer-events: none;
    user-select: all;
}

The element will never become a mouse event target. however , When its descendant element pointer-events Property specifies a different value , Mouse events can point to descendant elements , under these circumstances , The mouse event will trigger the event listener of the parent element during the capture or bubble phase .

JS Real time statistical length

js Use in .addEventListener("selectionchange"）, To listen to the event selected by the text .window.getSelection().toString() Used to get the selected text .

Take the following example , When text is selected , The length of the selected text can be displayed in real time .

    <p>
    </p>
    <p id="showConut"></p>
    <script>
      const showConut = document.getElementById("showConut");
      const handleSelectionChange = (event) => {
        let selection = window.getSelection().toString();
          showConut.textContent = `(${selection.length} character )`;
          return;
      };
      document.addEventListener("selectionchange", handleSelectionChange);
    </script>

image-20211126225146588

Postscript

Man , Learning things still needs to be systematic . It's probably not possible to do scattered things . This article only summarizes my choice of text , Some knowledge learned . If there is a new usage and scene in the future , Will sort it out ！