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 对象，更可靠且兼容性更好。
以上就是JavaScript如何保持网页文本选区颜色不变？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
807
