Jak wybrać cały tekst w contenteditable div?

Question

Zanim to zostanie oflagowane jako duplikat, chcę, abyś zdał sobie sprawę, że nikt nie dostarczył dobrej odpowiedzi na to konkretne pytanie. W select all text in contenteditable div when it focus/click, zaakceptowana odpowiedź i odpowiedź Tim Down nie są pomocne, ponieważ działają tylko wtedy, gdy element jest już skupiony. W moim przypadku chcę, aby cały tekst w contented div został wybrany po kliknięciu przycisku, nawet jeśli div nie był wcześniej zogniskowany.

Jak mogę to zrobić?

Answer 1

użyłem kodu z this thread wymyślić moją odpowiedź. To w 100% jQuery, o co też prosiłeś. Mam nadzieję, że Ci się spodoba:

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

jsfiddle link.

Answer 2

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

Sądząc po tej odpowiedzi podanych w linku, nie można użyć kodu na kliknięcia w obrębie przycisku.

Co im mówi się nawet, że w div onfocus="document.execCommand('selectAll',false,null)"

Następnie za pomocą jQuery do wyzwalania Fokus $('#test').focus();

Answer 3

Na przykład w następnym scenariuszu jeśli zestaw użytkownik nacisk na edytowalny div (z myszy, klawiatury lub klikając przycisk), a następnie wybrana jest zawartość edytowalnego elementu div.

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

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

Answer 4

Świetna funkcja.

mam go dostosować, aby umożliwić pełny wybór tekstu w dowolnej liczbie edycji div za pośrednictwem klasy, czy kliknięcie bezpośrednio lub kartach do:

$.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/