How does JavaScript keep web page selections still highlighted in blue after losing focus?

JavaScript web page selection highlighting skills

In web interaction, when the user selects text, the browser is usually highlighted in blue. However, when the page loses focus, the highlight may disappear and turn gray. This article introduces how to use JavaScript code to keep the selection highlighted in blue after the page loses focus.

Problem: The user selects text (for example, <textarea></textarea>元素内），选区高亮显示为蓝色。但点击页面其他区域，页面失去焦点后，高亮颜色变灰。如何用JavaScript代码保持蓝色高亮？

解决方案： 浏览器没有直接修改选区颜色属性的API。解决方法是保存并恢复选区信息。在页面失去焦点前保存选区信息，需要时再恢复。

以下代码片段演示如何通过保存和恢复Range对象来实现：

let lastRange = null; const txt = document.getElementById('myTextbox'); // 将'myTextbox'替换为你的文本框ID txt.onkeyup = function(e) { const selection = window.getSelection(); lastRange = selection.rangeCount > 0 ? selection.getRangeAt(0) : null; }; const btn = document.getElementById('restoreButton'); // 将'restoreButton'替换为你的按钮ID btn.onclick = () => { const selection = window.getSelection(); selection.removeAllRanges(); if (lastRange) { selection.addRange(lastRange); } };

这段代码在onkeyup事件中，使用window.getSelection()获取当前选区，并用getRangeAt(0)获取第一个Range对象，保存到lastRange变量。 点击按钮（btn）时，代码清除所有选区，然后使用selection.addRange(lastRange)重新添加保存的Range对象，恢复之前的选区。

重要说明： 这并非直接改变选区颜色，而是通过重建选区来间接恢复高亮显示。选区颜色由浏览器决定，JavaScript无法直接控制。 此方法的本质是重新创建选区，而非修改颜色。 请确保你的HTML中包含一个ID为myTextbox的文本框和一个ID为restoreButton的按钮。

The above is the detailed content of How does JavaScript keep web page selections still highlighted in blue after losing focus?. For more information, please follow other related articles on the PHP Chinese website!