始終保持所選文本瀏覽器突出顯示

Question

當文檔上的某些文本突出顯示時，只要單擊文檔，默認瀏覽器突出顯示就會丟失。

我想一直保持瀏覽器突出顯示，就像apture http://www.apture.com/。突出顯示一些文字，它會彈出一個「瞭解更多」的氣泡，點擊「瞭解更多」按鈕，它仍然不會失去默認瀏覽器的高光焦點。

我該怎麼做？

我基本上想獲得所選文本的位置而不添加一個範圍，並保持瀏覽器在單擊按鈕時突出顯示。

Answer 1

下面是如何在用戶單擊特定元素時保留選區的簡單示例。它在元素的mousedown事件中存儲選擇Range（s）或TextRange（IE < = 8），並在mouseup事件中重新選擇這些範圍。

<script type="text/javascript"> 
    var saveSelection, restoreSelection; 
    if (window.getSelection) { 
     // IE 9 and non-IE 
     saveSelection = function() { 
      var sel = window.getSelection(), ranges = []; 
      if (sel.rangeCount) { 
       for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
        ranges.push(sel.getRangeAt(i)); 
       } 
      } 
      return ranges; 
     }; 

     restoreSelection = function(savedSelection) { 
      var sel = window.getSelection(); 
      sel.removeAllRanges(); 
      for (var i = 0, len = savedSelection.length; i < len; ++i) { 
       sel.addRange(savedSelection[i]); 
      } 
     }; 
    } else if (document.selection && document.selection.createRange) { 
     // IE <= 8 
     saveSelection = function() { 
      var sel = document.selection; 
      return (sel.type != "None") ? sel.createRange() : null; 
     }; 

     restoreSelection = function(savedSelection) { 
      if (savedSelection) { 
       savedSelection.select(); 
      } 
     }; 
    } 

    window.onload = function() { 
     var specialDiv = document.getElementById("special"); 
     var savedSel = null; 

     specialDiv.onmousedown = function() { 
      savedSel = saveSelection(); 
     }; 

     specialDiv.onmouseup = function() { 
      restoreSelection(savedSel); 
     }; 
    }; 
</script> 

<p> 
    Select something up here and click on one of the areas below. 
    <b>The first will lose the selection</b>, while the second will keep it. 
</p> 
<div style="border: solid blue 1px">Normal div</div> 
<div id="special" style="border: solid blue 1px">Special div. 
    Press me and keep the selection</div> 

Answer 2

您可能需要查看JavaScript中的選擇範圍，然後使用CSS爲CSS添加跨度類。

span.highlight { 
    background: red; 
} 

Answer 3

我用代碼from here並有在http://jsfiddle.net/jrdGW/

工作示例選擇頂部的段落一些文本，然後點擊下方的段落。選擇將在1秒後恢復（以顯示它存儲它）。

經過Chrome，FF和IE測試。

代碼（在情況下的jsfiddle向下）：

var RNG = null; 

function GSel() { 
    var d = document; 
    if (d.selection) { 
     return d.selection.type == "Text" ? d.selection : null; 
    } 
    if (window.getSelection) { 
     return window.getSelection(); 
    } 
    return null; 
} 

function CRng() { 
    var sel = GSel(); 
    if (sel) { 
     if (sel.createRange) { 
      return sel.createRange(); 
     } 
     if (sel.rangeCount && sel.getRangeAt) { 
      return sel.getRangeAt(0); 
     } 
    } 
    return null; 
} 

function Sel(rng) { 
    if (rng.select) { 
     rng.select(); 
    } 
    else { 
     var s = GSel(); 
     if (s.removeAllRanges && s.addRange) { 
      s.removeAllRanges(); 
      s.addRange(rng); 
     } 
    } 
} 


$(document).ready(function() { 
    $('#learn').mousedown(function() { 
     RNG = CRng(); 
     setTimeout(function() { 
      if (RNG) { 
       Sel(RNG); 
      } 
     }, 1000); 
    }); 
});