如何选择CONTENTEDITABLE格中的所有文本？(How to select all text

在此之前，被标记为重复的，我要你知道，没有人真正对这个具体问题提供了一个很好的答案。 在中，当它集中CONTENTEDITABLE格全选所有文字/点击 ，公认的答案和Tim向下的回答都是没有帮助的，因为他们只有当元素已经专注工作。 就我而言，我希望有一个按钮，点击后可以选择在CONTENTEDITABLE格中的所有文本，即使在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 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:

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

通过在链接提供了这个答案来看，不能使用代码上点击您的按钮内。

什么即时消息说，在格连说onfocus="document.execCommand('selectAll',false,null)"

然后使用jQuery触发焦点$('#test').focus();

Answer 5:

Chrome并选择一切，所以我只是说RAF解决它：

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

Unpachted版本： http://jsfiddle.net/QKUZz/

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

文章来源: How to select all text in contenteditable div?