Come selezionare tutto il testo in div contenteditable?

Question

Prima che questo sia contrassegnato come un duplicato, voglio che tu ti renda conto che nessuno ha effettivamente fornito una buona risposta per questa domanda specifica. In select all text in contenteditable div when it focus/click, la risposta accettata e la risposta di Tim Down non sono entrambe utili, poiché funzionano solo quando l'elemento è già focalizzato. Nel mio caso, voglio che tutto il testo nel div in contentedabile sia selezionato dopo il clic di un pulsante, anche se il div non era stato messo a fuoco in anticipo.

Come posso fare questo?

Answer 1

ho usato un po 'di codice da this thread a venire con la mia risposta. È jQuery al 100% come richiesto. Spero vi piaccia :)

jQuery.fn.selectText = function(){ 
    var doc = document; 
    var element = this[0]; 
    console.log(this, element); 
    if (doc.body.createTextRange) { 
     var range = document.body.createTextRange(); 
     range.moveToElementText(element); 
     range.select(); 
    } else if (window.getSelection) { 
     var selection = window.getSelection();   
     var range = document.createRange(); 
     range.selectNodeContents(element); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
}; 

$("button").click(function() { 
    $("#editable").selectText(); 
});​ 

collegamento jsfiddle.

Answer 2

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

A giudicare da questa risposta fornita nel collegamento, non è possibile utilizzare il codice sul clic all'interno del pulsante.

Cosa dice IM è anche dire nel div onfocus="document.execCommand('selectAll',false,null)"

Quindi utilizzare jQuery per innescare attenzione $('#test').focus();

Answer 3

Ad esempio, nel seguente scenario, se impostato dall'utente attenzione in div modificabile (con il mouse, la tastiera o facendo clic su un pulsante) quindi viene selezionato il contenuto del div editabile.

<div id="editable" style=" border:solid 1px #D31444" contenteditable="true" 
 
    onfocus="document.execCommand('selectAll', false, null);"> 
 
    12 some text... 
 
</div> 
 
    
 
<button onclick="document.getElementById('editable').focus();" >Click me</button>

Su JSFiddle: http://jsfiddle.net/QKUZz/

Answer 4

Grande funzionalità.

ho adattato per permettere la piena selezione di testo attraverso qualsiasi numero di div modificabili tramite una classe, se cliccato direttamente, o schede a:

$.fn.selectText = function(){ 
    var doc = document; 
    var element = this[0]; 
    //console.log(this, element); 
    if (doc.body.createTextRange) { 
     var range = document.body.createTextRange(); 
     range.moveToElementText(element); 
     range.select(); 
    } else if (window.getSelection) { 
     var selection = window.getSelection();   
     var range = document.createRange(); 
     range.selectNodeContents(element); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
}; 

$(".editable").on("focus", function() { 
    $(this).selectText(); 
}); 
$(".editable").on("click", function() { 
    $(this).selectText(); 
}); 
$('.editable').mouseup(function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
    // maximize browser compatability 
    e.returnValue = false; 
    e.cancelBubble = true; 
    return false; 
}); 

HTML:

<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">01 text...</div> 
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">02 text...</div> 
<div class="editable" style="border:dotted 1px #ccc;" contenteditable="true">03 text...</div> 

FIDDLE :

http://jsfiddle.net/tw9jwjbv/