JavaScript如何保持網頁選區在失去焦點后仍為藍色高亮？

JavaScript網頁選區高亮保持技巧

網頁交互中，用戶選中文本時，瀏覽器通常以藍色高亮顯示。然而，頁面失去焦點后，高亮可能會消失變灰。本文介紹如何用JavaScript代碼，在頁面失去焦點后保持選區藍色高亮顯示。

問題： 用戶選中文本（例如，文本輸入框或元素內），選區高亮顯示為藍色。但點擊頁面其他區域，頁面失去焦點后，高亮顏色變灰。如何用JavaScript代碼保持藍色高亮？

解決方案： 瀏覽器沒有直接修改選區顏色屬性的API。解決方法是保存并恢復選區信息。在頁面失去焦點前保存選區信息，需要時再恢復。

以下代碼片段演示如何通過保存和恢復Range對象來實現：

立即學習“Java免費學習筆記（深入）”；

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的按鈕。