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