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

wufei123 2025-03-12 阅读:19 评论:0

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

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

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

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

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

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

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

PHP

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);
  }
};

这段代码在 keyup 事件中将最后一次选区的 Range 对象保存到 lastRange 变量。点击按钮 btn 时，代码清除当前选区，然后使用 lastRange 重新创建选区，恢复蓝色高亮。注意：这需要 txt 元素具有 onkeyup 事件监听。此方法直接操作浏览器原生 Selection 对象，更可靠且兼容性更好。

以上就是JavaScript如何保持网页文本选区颜色不变？的详细内容，更多请关注知识资源分享宝库其它相关文章！