divを背景としてJS範囲/選択を模倣するには？

Question

背景としてのdivと私は範囲/選択を模倣する必要があります（ウェブサイト上のコンテンツをハイライト表示するものを、そしてあなたが元CTRL + Cのために押したときには、コンテンツをコピーします）。例えば、複写などの機能が不可欠です：チャンスは、「ハイライト表示のdivは」position:absolute;

<div id="highlight"> 
    <!-- The highlightor divs would go here --> 
</div> 
<div id="edit"> 
    <!-- The divs to be highlighted (that have text) would go here --> 
</div> 

編集になるということです。

PS：「理由」について興味がある場合は、this questionを参照してください。 私は新しい質問を作成しました。私は古いものがかなり答えられたと感じました。そして、この1つは、それとはかなり異なっていました。

Answer 1

ここに概念があり、始めるためのコードがいくつかあります。ページ内のテキストが選択されるたびに、そのテキストをページ上の非表示のテキストエリアに追加してから、テキストエリアを選択します。元の選択範囲をスパンにラップして、選択して表示させます。この方法では、選択の外観があり、隠れたテキストエリアが実際に選択されているため、ユーザーが「ctrl + c」を押すと、テキストエリアからテキストがコピーされます。

あなたが探しているすべての機能を取得するには、あなたはおそらくこれを拡張したいと思います。 「ctrl + a」のキーをスニッフィングします（すべて選択します）。私はあなたが右クリックの動作を上書きすることはできないと思います...少なくとも簡単ではないし、エレガントではありません。しかし、これは少なくともあなたが走るための概念の証明です。

window.onload = init; 
function init() 
{ 
    document.getElementById("hidden").value = ""; 
    document.body.ondblclick = interceptSelection; 
    document.body.onmouseup = interceptSelection; 
} 
function interceptSelection(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    var hidden = document.getElementById("hidden"); 
    if (target == hidden) return; 
    var range, text; 
    if (window.getSelection) 
    { 
     var sel = getSelection(); 
     if (sel.rangeCount == 0) return; 
     range = getSelection().getRangeAt(0); 
    } 
    else if (document.selection && document.selection.createRange) 
    { 
     range = document.selection.createRange(); 
    } 
    text = "text" in range ? range.text : range.toString(); 
    if (text) 
    { 
     if (range.surroundContents) 
     { 
      var span = document.createElement("span"); 
      span.className = "selection"; 
      range.surroundContents(span); 
     } 
     else if (range.pasteHTML) 
     { 
      range.pasteHTML("<span class=\"selection\">" + text + "</span>") 
     } 
     hidden.value += text; 
    } 
    hidden.select(); 
} 

ここで私はテキストエリアとスタイルを隠すために私のテストで使用したCSSは、選択したテキストです：

#hidden 
{ 
    position: fixed; 
    top: -100%; 
} 
.selection 
{ 
    background-color: Highlight; 
    color: HighlightText; 
}