Javascript 如何选择contenteditable div中的所有文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12243898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select all text in contenteditable div?
提问by Lucas
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.
在将其标记为重复之前，我希望您意识到实际上没有人为这个特定问题提供好的答案。在焦点/单击时选择 contenteditable div 中的所有文本时，接受的答案和 Tim Down 的答案都没有帮助，因为它们仅在元素已经聚焦时才有效。就我而言，我希望在单击按钮后选择 contenteditable div 中的所有文本，即使 div 没有事先聚焦。
How could I do this?
我怎么能这样做？
回答by Tom Oakley
I used some code from this threadto come up with my answer. It's 100% jQuery as you asked for as well. Hope you like it :)
我使用了这个线程中的一些代码来提出我的答案。正如您所要求的那样，它也是 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();
});?
jsfiddlelink.
jsfiddle链接。
回答by Andrew D.
For example in next scenario if user set focus into editable div (with mouse, keyboard or by clicking a button) then content of editable div is selected.
例如，在下一个场景中，如果用户将焦点设置为可编辑 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>On JSFiddle: http://jsfiddle.net/QKUZz/
在 JSFiddle：http: //jsfiddle.net/QKUZz/
回答by Eric P
Great function.
很棒的功能。
I've adapted it to enable full selection of text across any number of editable divs via a class, whether clicked directly, or tabbed to:
我已经对其进行了修改，以通过一个类在任意数量的可编辑 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:
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:
小提琴：
回答by LmC
<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>
Judging by this answer provided in the link, cant you use the code on click within your button.
根据链接中提供的这个答案判断，您不能在按钮内单击时使用代码。
What im saying is even say in the div onfocus="document.execCommand('selectAll',false,null)"
我所说的甚至在 div 中说 onfocus="document.execCommand('selectAll',false,null)"
Then use jQuery to trigger focus $('#test').focus();
然后使用jQuery触发焦点 $('#test').focus();
回答by redaxmedia
Chrome does select everything, so I just added RAF to work around it:
Chrome 确实选择了所有内容，所以我只是添加了 RAF 来解决它：
requestAnimationFrame(() => document.execCommand('selectAll'));
Unpachted version: http://jsfiddle.net/QKUZz/
未修补版本：http: //jsfiddle.net/QKUZz/
Patched version: http://jsfiddle.net/0aqptw8m/
补丁版本：http: //jsfiddle.net/0aqptw8m/
