JavaScript如何保持網(wǎng)頁選區(qū)在失去焦點(diǎn)后仍為藍(lán)色高亮？

JavaScript網(wǎng)頁選區(qū)高亮保持技巧

網(wǎng)頁交互中，用戶選中文本時(shí)，瀏覽器通常以藍(lán)色高亮顯示。然而，頁面失去焦點(diǎn)后，高亮可能會(huì)消失變灰。本文介紹如何用JavaScript代碼，在頁面失去焦點(diǎn)后保持選區(qū)藍(lán)色高亮顯示。

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

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

以下代碼片段演示如何通過保存和恢復(fù)Range對象來實(shí)現(xiàn)：

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

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()獲取當(dāng)前選區(qū)，并用getRangeAt(0)獲取第一個(gè)Range對象，保存到lastRange變量。 點(diǎn)擊按鈕（btn）時(shí)，代碼清除所有選區(qū)，然后使用selection.addRange(lastRange)重新添加保存的Range對象，恢復(fù)之前的選區(qū)。

重要說明： 這并非直接改變選區(qū)顏色，而是通過重建選區(qū)來間接恢復(fù)高亮顯示。選區(qū)顏色由瀏覽器決定，JavaScript無法直接控制。 此方法的本質(zhì)是重新創(chuàng)建選區(qū)，而非修改顏色。 請確保你的html中包含一個(gè)ID為myTextbox的文本框和一個(gè)ID為restoreButton的按鈕。