私はこのようになりますのdiv内の単純な非クリッカブルリンクを持っているのjavascript

Question

を持つ単一の左クリックでのdiv内のすべてのテキストを選択する：ユーザーがコピーすることができ、共有可能なリンクであることを意味しています

他のものに貼り付ける。ユーザビリティの目的のために

は、私は全体のリンクを選択するためにどこかのdiv内の単一の左クリックをしたい：

私は、ジャバスクリプト/ Webプログラミングについて多くを知らないが、私は次のことを試してみました：

<div id="share_link" onClick="select_all('share_link')"><%= request.url %></div> 

とこれが動作しないこのJavaScript

<script type="text/javascript"> 
    function select_all(id) { 
     document.getElementById(id).focus(); 
    } 
</script> 

。私は何が欲しいのかを達成するために何が一番簡単なのかを知りたい。 divをテキスト入力またはリンク内のテキストに変更することを考えましたが、理想的にはコンテンツを読み取り専用、編集不可、クリック不可にする必要があります。

Answer 1

jQueryを入力フィールド：あなたはそれをHTMLにreadonly属性を使用して、入力フィールドがあるという事実を隠すことができ

$("#myInputField").focus(function(){ 
    // Select input field contents 
    this.select(); 
}); 

：

<input type="text" name="country" value="Norway" 
    readonly="readonly" /> 

そして、それがヒントはありませんので、カーソルを変更するためにCSSを使用テキスト入力：

cursor: crosshair; 

Answer 2

これは、他のブラウザと比較してIEでは完全に異なっています。以下は、すべての主要なブラウザで動作します：

<script type="text/javascript"> 
    function select_all(el) { 
     if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { 
      var range = document.createRange(); 
      range.selectNodeContents(el); 
      var sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (typeof document.selection != "undefined" && typeof document.body.createTextRange != "undefined") { 
      var textRange = document.body.createTextRange(); 
      textRange.moveToElementText(el); 
      textRange.select(); 
     } 
    } 
</script> 

<div onclick="select_all(this)">Link text</div>