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

【问题标题】：How to select all text in contenteditable div?如何选择 contenteditable div 中的所有文本？
【发布时间】：2012-08-27 22:58:08
【问题描述】：

在将其标记为重复之前，我希望您意识到实际上没有人为这个特定问题提供好的答案。在select all text in contenteditable div when it focus/click 中，接受的答案和 Tim Down 的答案都没有帮助，因为它们仅在元素已经聚焦时才起作用。就我而言，我希望在单击按钮后选择 contenteditable div 中的所有文本，即使该 div 没有事先获得焦点。

我该怎么做？

【问题讨论】：

标签： javascript jquery html contenteditable

【解决方案1】：

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

【讨论】：

【解决方案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/

【讨论】：

@think123，请参阅更新答案中的链接。为什么不document.execCommand？另一种方式（我认为）需要使用 selection 和 range 对象。
您能更新它并将其添加为功能吗？谢谢。
为什么 selectAll 会选择文档中的所有内容？ :(
这在 Chrome 43 中无法可靠运行。请参阅issue I filed about it。

【解决方案3】：

我使用了来自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链接。

【讨论】：

浏览器兼容性如何？
Fiddle 适用于 FF 28，但不适用于带有 OS 主题 (CSS appearance) 的 contenteditable 输入元素。您可能想将element.focus(); 添加到selectText() 函数中，否则它将选择文本而光标不在该字段中。
只是一个建议，删除行“console.log(this, element);”，因为它不需要工作。

【解决方案4】：

很棒的功能。

我已经对其进行了调整，可以通过一个类在任意数量的可编辑 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/

【讨论】：

很棒的功能，救了我的命。我添加了$("#mybutton").click(function () { $("#mydiv").selectText(); document.execCommand("copy");，它将DIV的内容复制到剪贴板。

【解决方案5】：

Chrome 确实选择了所有内容，所以我只是添加了 RAF 来解决它：

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

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

【讨论】：