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如何保持网页文本选区颜色不变？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1563233.html
微信扫一扫 
支付宝扫一扫 
