如何选择contenteditable div中的所有文本？ [英] How to select all text in contenteditable div?

问题描述

在将其标记为重复之前，我希望您明白，没有人真正为这个具体问题提供了很好的答案。在选择contenteditable div中的所有文字时，它会重点/点击，接受的答案和Tim Down的答案都没有帮助，因为只有当元素已经聚焦时才会有效。在我的情况下，我希望在点击一个按钮后选择contenteditable div中的所有文本，即使div没有事先被关注。

我怎么能做这个？

解决方案

我使用 this thread 提出我的答案。它也是你要求的100％jQuery。希望你喜欢它：）

$ p $ 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）;
}
};
$ b $（button）。click（function（）{
$（＃editable）。selectText（）;
}）;


jsfiddle 链接。

Before this is flagged as a duplicate, I want you to realize that no one has actually provided a good answer for this specific question. In select all text in contenteditable div when it focus/click, the accepted answer and Tim Down's answer are both not helpful, as they only work when the element is already focused. In my case, I want all the text in the contenteditable div to be selected after the click of a button, even if the div was not focused beforehand.

How could I do this?

解决方案

I used some code from this thread to come up with my answer. It's 100% jQuery as you asked for as well. Hope you like it :)

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 link.

这篇关于如何选择contenteditable div中的所有文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！