关于网页中的文本选择以及统计选中文本长度

*

大家好，我是半夏，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注 点赞 加我微信：「frontendpicker」，一起学习交流前端，成为更优秀的工程师～关注公众号：**搞前端的半夏**,了解更多前端知识! 点我探索新世界！

*

*

原文链接 ==>http://sylblog.xin/archives/100

*

前言

我翻开以往敲下的代码，这该死的没有灵魂的代码，歪歪斜斜的每个函数上都写着“复制粘贴”四个字。我横竖睡不着，仔细看了半夜，才能字缝里看出字来，满屏都写着两个字“菜狗”！！！

——鲁迅（假）

作为一个面向CV的CSS+JS程序员，我最经常干的事，就是赋值粘贴了，之前粗浅的学了些。并没有成体系的学习。CSS中大抵是有两个属性关于文本选择的！一个**::selection** ，另一个「user-select」

::selection

::selction 是用来强调用户点击或者拖动鼠标等操作选中的内容。

用法很简单：

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

image-20211126221740746

目前::selection仅支持下面几个属性：

• color
• background-color
• text-decoration 及其相关属性
• text-shadow
• stroke-color， fill-color和 stroke-width

虽然支持的属性不过，我们却可以利用这几个属性做一些有趣的选择效果。

例子-选中强调

主要利用text-shadow给文字加上阴影，当文字选中的时候，显示出效果。

  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:更多text-shadow制作的文字效果，可以查看：https://juejin.cn/post/7028956229925863455」

user-select

user-select主要是控制用户的选中，例如文本禁止选中，部分选中等等！

主要的属性值有：

none, auto, text, contain, all

「具体的用法可以查看：https://juejin.cn/post/7022939685978636302」

遇上pointer-events:none;

当元素设置pointer-events:none，导致元素永远不会成为鼠标事件的target。我一开始也以为，即使当元素设置元素user-select为可选中，只要pointer-events:none；最终还是无法选中。但是结果却相反:

下面的代码，设置元素可以全选中，但是pointer-events:none;。实验的最终结果是，文字可以被选中。

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

元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

JS实时统计长度

js中使用.addEventListener("selectionchange"）,来监听文本选中的事件。window.getSelection().toString()用来获取选中的文本。

例如下面这个例子，当选中文字，可以实时显示选中文本的长度。

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

image-20211126225146588

后记

人呐，学东西还是要成体系的。零零散散的大抵还是不行的。此文仅总结我对文本选择，学到的一些知识。日后若是有新用法新场景，也会整理进来！

本文由 mdnice 多平台发布