JavaScript如何保持网页文本选区颜色不变？

javascript 如何保持网页文本选区颜色？

网页交互中，用户选中文本时，浏览器默认显示蓝色高亮选区。然而，页面失去焦点后，选区颜色可能变灰，影响用户体验。本文介绍如何用 JavaScript 保持选区蓝色高亮。

问题： 页面选中文本时高亮显示蓝色，但页面失去焦点后，高亮颜色变灰。如何用 JavaScript 恢复蓝色高亮？

解决方案： 关键在于保存和恢复选区对象。浏览器使用 Range 对象表示选区。我们可以监听文本输入事件（例如 keyup 事件）获取并保存当前 Range 对象。需要恢复时，再将保存的 Range 对象重新添加到选区。

以下代码片段演示如何实现（假设页面包含文本区域 txt 和按钮 btn）：

立即学习“Java免费学习笔记（深入）”；

let lastRange = null;txt.onkeyup = function(e) {  const selection = document.getSelection();  // 保存最后的 Range 对象  lastRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null;};btn.onclick = () => {  const selection = document.getSelection();  selection.removeAllRanges();  // 恢复上次的选区  if (lastRange) {    selection.addRange(lastRange);  }};

登录后复制