Question

在此之前被标记为重复之前，我希望您意识到没有人真正为这个具体问题提供了一个好的答案。在select all text in contenteditable div when it focus/click中，接受的答案和Tim Down的答案都没有用，因为它们仅在元素已经集中时才起作用。在我的情况下，我希望在单击按钮后选择contenteditable div中的所有文本，即使事先没有聚焦div。

我怎么能这样做？

Answer 1

我使用this thread中的一些代码来提出我的答案。这也是你要求的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>

FIDDLE：

http://jsfiddle.net/tw9jwjbv/

Answer 4

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

Answer 5

Chrome会选择所有内容，因此我刚刚添加了RAF来解决：

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

未发布的版本：http://jsfiddle.net/QKUZz/

补丁版本：http://jsfiddle.net/0aqptw8m/

如何选择contenteditable div中的所有文本？

5 个答案: