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

在这被标记为重复之前，我想让你意识到没有人真正为这个特定的问题提供了一个好的答案。在本文中，被接受的答案和Tim Down的答案都没有帮助，因为它们只在元素已经聚焦时才起作用。在我的例子中，我希望在单击按钮后选择contenteditable div中的所有文本，即使该div事先没有聚焦

我怎么能这样做

<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触发focus$'test'。focus

例如，在下一个场景中，如果用户使用鼠标、键盘或单击按钮将焦点设置为可编辑div，则可选择可编辑div的内容

12一些文本。。。 单击我我使用了来自的一些代码来给出我的答案。它也是您要求的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();
});​

链接。

功能强大

我对其进行了调整，使其能够通过一个类在任意数量的可编辑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:

小提琴：

---

Chrome确实选择了一切，所以我只是添加了RAF来解决这个问题：

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

---

演示：

@think123，请参阅更新答案中的链接。为什么不使用document.execCommand？我认为使用选择和范围对象需要另一种方式。您是否能够更新它并将其作为功能添加？谢谢。为什么selectAll会选择文档中的所有内容这在Chrome 43中无法可靠工作。请参阅。这方面的浏览器兼容性如何？Fiddle适用于FF 28，但不适用于具有OS主题CSS外观的contenteditable输入元素。您可能需要添加元素。焦点；指向selectText函数，或者它将在光标不在该字段的情况下选择文本。建议删除行console.logthis，元素；，因为它不需要工作。功能强大，救了我的命。我添加了$mybutton.clickfunction{$mydiv.selectText；document.execCommandcopy；，它将DIV的内容复制到剪贴板。

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