Wie wählt man den gesamten Text in contenteditable div aus?

Bevor diese wird gekennzeichnet als Duplikate, ich möchte, dass Sie erkennen, dass niemand wirklich eine gute Antwort für diese Frage. In wählen Sie den gesamten text in contenteditable div, wenn es den Fokus/klickendie akzeptierte Antwort, und Tim das Down-Antwort sind beide nicht hilfreich, da Sie nur funktionieren, wenn das element ist bereits gerichtet. In meinem Fall möchte ich den text in der contenteditable div-Element ausgewählt werden, nach dem Klick auf eine Schaltfläche, auch wenn das div-Element wurde nicht konzentriert vorher.

Wie könnte ich dies tun?

InformationsquelleAutor der Frage think123 | 2012-09-03

  1. 48

    Verwendete ich einen code von dieser thread zu kommen mit meiner Antwort. Es ist 100% jQuery als Sie gefragt, für wie gut. Hoffe es gefällt Euch 🙂

    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.

    InformationsquelleAutor der Antwort Tom Oakley

  2. 3

    Große Funktion.

    Habe ich es angepasst, um die vollständige Auswahl von text auf einer beliebigen Anzahl von bearbeitbaren divs über eine Klasse, egal ob direkt anklicken, oder im Registerformat,:

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

    InformationsquelleAutor der Antwort Eric P

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

    Beurteilung durch diese Antwort in den link, kippe Sie code verwenden, die auf klicken Sie auf die Schaltfläche.

    Was ich sagen will ist, auch sagen, dass in den div onfocus="document.execCommand('selectAll',false,null)"

    Dann nutzen jQuery zum auslösen konzentrieren $('#test').focus();

    InformationsquelleAutor der Antwort LmC

Schreibe einen Kommentar