如何使用 Javascript 鼠标事件和 CSS 重新创建“突出显示”选择？

Posted 2023-03-06

【中文标题】如何使用 Javascript 鼠标事件和 CSS 重新创建“突出显示”选择？

【英文标题】：How to recreate "highlight" selection with Javascript mouse events and CSS?

【发布时间】：2013-07-07 11:01:22

【问题描述】：

我希望重新创建突出显示文本的功能。

突出显示上面的句子。您看到包围所选文本的蓝色了吗？让您知道那是您选择的文本，一直到字符；我想重新创建它并更改它的颜色。

您如何使用语言中提供的鼠标事件重新创建突出显示（可能不完全正确）？ mousedown、mousemove、mouseup 等的某种组合？

如何定义选择？是位置性的吗，mousedown 创建一个原点，mouseup 创建一个终点，不同之处在于选择？如果是这样，那么您如何访问该网格信息？

我真的不知道从哪里开始或可以给我任何有用的搜索结果的术语。 我的目标是以某种方式将突出显示功能与键盘按钮联系起来，这就是我希望重新创建它的功能的原因。

任何帮助将不胜感激！

【问题讨论】：

MDN 总是一个很好的搜索结果...

我感觉迟钝。谢谢！

【参考方案1】：

您可以使用此 css 代码更改选择的颜色：

::selection 
    background: #ffb7b7; /* Safari */


::-moz-selection 
    background: #ffb7b7; /* Firefox */

（例如here）

其他方面，请查看 Teemus 评论 (MDN)

【讨论】：

谢谢！认为可以根据选择时在键盘上按下的按钮动态更改 CSS 吗？绿色代表持有 G，红色代表持有 R，以此类推？