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

Question

在此之前被标记为重复之前,我希望您意识到没有人真正为这个特定问题提供了一个好的答案.在焦点/点击时选择contenteditable div中的所有文本,接受的答案和Tim Down的答案都没有帮助,因为它们仅在元素已经聚焦时才起作用.在我的情况下,我希望在单击按钮后选择contenteditable div中的所有文本,即使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的内容.

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