这是我参与11月更文挑战的第26天,活动详情查看:2021最后一次更文挑战
前言
作为一个面向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制作的文字效果,可以查看:juejin.cn/post/702895…
user-select
user-select主要是控制用户的选中,例如文本禁止选中,部分选中等等!
主要的属性值有:
none, auto, text, contain, all
复制代码
具体的用法可以查看: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 getCount = (event) => {
let count = window.getSelection().toString();
showConut.textContent = `(${count.length}字符)`;
return;
};
document.addEventListener("selectionchange", getCount);
</script>
复制代码
后记
人呐,学东西还是要成体系的。零零散散的大抵还是不行的。此文仅总结我对文本选择,学到的一些知识。日后若是有新用法新场景,也会整理进来!