selecciona todo el texto en div contenteditable cuando se enfoca/clic

Tengo div satisfactorio como a continuación.selecciona todo el texto en div contenteditable cuando se enfoca/clic

<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>

Lo que necesito es que cuando hago clic en el div, todo el texto se selecciona automáticamente. ¿Puedes darme una solución por favor?

Fuente

2010-09-27 angry kiwi

Esta respuesta proporciona la manera más "correcta" de hacer lo que desea: http://stackoverflow.com/a/6150060/2703399 – josh

Prueba esto:

<div style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>

Fuente

2010-09-27 16:39:59

Esto se haría mejor utilizando el evento 'focus', porque al usar el evento click resaltará todo cada vez que el usuario intente hacer clic para colocar el cursor. –

Bueno, probablemente, pero eso depende de lo que quiera el autor de la pregunta. –

Acabo de probar esto en Chrome Versión 24.0.1312.57 OS X. Usando jQuery 1.9.1, el enlace al 'focus' _does not_ work. La vinculación al evento 'click' seleccionó el texto: ' $ ('.editable'). On ('click', function() {document.execCommand ('selectAll', false, null);}); ' – berto

Esto lo hará. El temporizador está ahí para Chrome y Safari porque el navegador nativo que selecciona el elemento completo parece activarse después del evento de enfoque, anulando el efecto del código de selección a menos que se posponga hasta después del evento de enfoque:

var div = document.getElementById("editable"); 

div.onfocus = function() { 
    window.setTimeout(function() { 
     var sel, range; 
     if (window.getSelection && document.createRange) { 
      range = document.createRange(); 
      range.selectNodeContents(div); 
      sel = window.getSelection(); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } else if (document.body.createTextRange) { 
      range = document.body.createTextRange(); 
      range.moveToElementText(div); 
      range.select(); 
     } 
    }, 1); 
};

Fuente

2010-09-27 16:55:45

¿No debería haber una forma de hacer esto con preventDefault o stopPropagation también? Usar setTimeout parece algo feo porque tienes que romper la pila de llamadas. – Adam

@ Adam: No lo creo. No desea evitar que el elemento editable reciba el foco, por lo que 'preventDefault()' está desactivado. 'stopPropagation()' solo detiene el evento de propagarse al próximo objetivo, lo que no es útil para esto. –

tim, ¿por qué no eres moderador? – think123

El problema con el evento focus en un div es que no se puede iniciar porque cree que un div no debe ser editable. Los contenidos editables en el DOM están marcados con tabindex en segundo plano, por lo que para que su div reciba el evento onfocus, debe declarar explícitamente la propiedad div de tabindex. HTML:

<div style=" border:solid 1px #D31444" contenteditable="true" tabindex="1" onfocus="document.execCommand('selectAll',false,null)" >12 some text...</div>

que debería funcionar con onfocus.

Fuente

2016-02-13 21:02:11

Al hacerlo, hace que seleccione todo el documento. Puede usar el mismo código, pero recomiendo usar 'setTimeout' para' 150' ms, por lo que no seleccionará el documento completo. Espero que esto los ayude a todos! –

selecciona todo el texto en div contenteditable cuando se enfoca/clic

Respuesta

Cuestiones relacionadas