seleziona tutto il testo in div contenteditable quando mette a fuoco/clicca

Ho div divinitabile come di seguito.seleziona tutto il testo in div contenteditable quando mette a fuoco/clicca

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

Quello che mi serve è che quando clicco sul div, tutto il testo verrà automaticamente selezionato. Puoi darmi una soluzione per favore?

fonte

2010-09-27 angry kiwi

Questa risposta fornisce il modo più 'corretto' per fare quello che vuoi: http://stackoverflow.com/a/6150060/2703399 – josh

Prova questo:

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

fonte

2010-09-27 16:39:59

Questo sarebbe meglio fatto usando l'evento 'focus', perché usando l'evento click evidenzierà tutto ogni volta che l'utente tenta di fare clic per posizionare il cursore. –

Beh, probabilmente, ma dipende da cosa l'autore della domanda vuole. –

Ho appena provato questo in Chrome versione 24.0.1312.57 OS X. Utilizzando jQuery 1.9.1, l'associazione a 'focus' _does not_ work. Il collegamento all'evento click ha selezionato il testo: '$ ('. Editable'). On ('click', function() {document.execCommand ('selectAll', false, null);});' – berto

Questo lo farà. Il timer è lì per Chrome e Safari perché in quei browser, il comportamento del browser nativo che seleziona l'intero elemento sembra attivarsi dopo l'evento focus, annullando in tal modo l'effetto del codice di selezione a meno che posticipato fino a dopo l'evento focus:

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); 
};

fonte

2010-09-27 16:55:45

Non dovrebbe esserci un modo per farlo con preventDefault o stopPropagation? Usare setTimeout sembra un po 'brutto perché devi rompere lo stack delle chiamate. – Adam

@Adam: non credo. Non vuoi impedire all'elemento modificabile di ricevere lo stato attivo, quindi 'preventDefault()' è spento. 'stopPropagation()' si limita a far propagare l'evento al prossimo target, il che non è utile per questo. –

tim, perché non sei un moderatore? – think123

Il problema con l'evento focus su un div è che non può essere attivato perché ritiene che un div non debba essere modificabile. I contenuti modificabili nel DOM sono contrassegnati con tabindex sullo sfondo, quindi affinché il div possa ricevere l'evento onfocus, è necessario dichiarare esplicitamente la proprietà tabindexdiv. HTML:

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

che dovrebbero funzionare con onfocus.

fonte

2016-02-13 21:02:11

In questo modo viene selezionato l'intero documento. Puoi usare lo stesso codice, ma ti consiglio di usare un 'setTimeout' per' 150' ms in modo che non selezioni tutto il documento. Spero che questo ti aiuti tutti! –

seleziona tutto il testo in div contenteditable quando mette a fuoco/clicca

risposta

Problemi correlati