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

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 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 3

例如，在接下来的情况下，如果用户设定的对焦转换成可编辑的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 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> 

FIDDLE ：

http://jsfiddle.net/tw9jwjbv/