seleccionar todo el texto dentro de un div en un solo clic izquierdo con javascript

Question

Tengo un enlace no se puede hacer clic simple dentro de un div que tiene este aspecto:

Se supone que debe haber un vínculo compartible que el usuario puede copiar pegar en otras cosas.

Para los propósitos de usabilidad, quiero un solo clic izquierdo en cualquier lugar dentro del div para seleccionar el enlace completo:

No sé mucho acerca de, javascript programación/web, así que he intentado lo siguiente :

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

y esto Javascript

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

esto no funciona. Me gustaría saber qué es lo más simple que debo hacer para lograr lo que quiero. Pensé en cambiar el div a una entrada de texto o el texto dentro para ser un enlace, pero idealmente el contenido dentro debería ser de solo lectura, no editable y no hacer clic

Answer 1

Puede usar jQuery para esto con un campo de entrada:

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

puede enmascarar el hecho de que es un campo de entrada con el atributo de sólo lectura en el html:

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

Y el uso de CSS para cambiar el cursor para que no se insinuar una entrada de texto, algo como:

cursor: crosshair; 

Answer 2

Esto se logra de manera completamente diferente en IE en comparación con otros navegadores. El siguiente trabajo en todos los principales navegadores:

<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>