乐趣区

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

jiezi

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员. 如果喜爱我的文章，能够关注➕ 点赞 👍 加我微信：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);
}

目前::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;
 }

PS: 更多 text-shadow 制作的文字效果，能够查看：https://juejin.cn/post/702895…

user-select

user-select 次要是管制用户的选中，例如文本禁止选中，局部选中等等！

次要的属性值有：

none, auto, text, contain, all

具体的用法能够查看：https://juejin.cn/post/702293…

遇上 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>

后记

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

本文由 mdnice 多平台公布

退出移动版