如何選擇contenteditable div中的所有文本？

Question

在將其標記為重復之前，我希望您意識到實際上沒有人為這個特定問題提供好的答案。 在焦點/單擊時選擇 contenteditable div 中的所有文本時，接受的答案和 Tim Down 的答案都沒有幫助，因為它們僅在元素已經聚焦時才有效。 就我而言，我希望在單擊按鈕后選擇 contenteditable div 中的所有文本，即使 div 沒有事先聚焦。

我怎么能這樣做？

Answer 1

我使用了這個線程中的一些代碼來提出我的答案。 正如您所要求的那樣，它也是 100% jQuery。 希望你喜歡 ：）

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鏈接。

Answer 2

例如，在下一個場景中，如果用戶將焦點設置為可編輯 div（使用鼠標、鍵盤或通過單擊按鈕），則選擇可編輯 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>

在 JSFiddle： http : //jsfiddle.net/QKUZz/

Answer 3

很棒的功能。

我已經對其進行了修改，以通過一個類在任意數量的可編輯 div 中啟用完整的文本選擇，無論是直接單擊還是選項卡：

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

小提琴：

http://jsfiddle.net/tw9jwjbv/

Answer 4

Chrome 確實選擇了所有內容，所以我只是添加了 RAF 來解決它：

requestAnimationFrame(() => document.execCommand('selectAll'));

演示： http : //jsfiddle.net/0aqptw8m/

Answer 5

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

根據鏈接中提供的這個答案判斷，您不能在按鈕內單擊時使用代碼。

我所說的甚至在 div onfocus="document.execCommand('selectAll',false,null)"

然后使用jQuery觸發焦點$('#test').focus();