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

举报
搞前端的半夏 发表于 2022/03/31 23:34:18 2022/03/31
【摘要】 theme: channing-cyan 前言我翻开以往敲下的代码,这该死的没有灵魂的代码,歪歪斜斜的每个函数上都写着“复制粘贴”四个字。我横竖睡不着,仔细看了半夜,才能字缝里看出字来,满屏都写着一串字“CV工程师”!!作为一个面向CV的CSS+JS程序员,我最经常干的事,就是赋值粘贴了,之前粗浅的学了些。并没有成体系的学习。CSS中大抵是有两个属性关于文本选择的!一个 ::selecti...

theme: channing-cyan

前言

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

作为一个面向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.png

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

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

例子-选中强调

主要利用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.png

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 getCount = (event) => {
        let count = window.getSelection().toString();
          showConut.textContent = `(${count.length}字符)`;
          return;
      };
      document.addEventListener("selectionchange", getCount);
    </script>

文字统计1.gif

后记

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。