在将其标记为重复之前，我希望您意识到实际上没有人为这个特定问题提供好的答案。在焦点/单击时选择 contenteditable div 中的所有文本时，接受的答案和 Tim Down 的答案都没有帮助，因为它们仅在元素已经聚焦时才有效。就我而言，我希望在单击按钮后选择 contenteditable div 中的所有文本，即使 div 没有事先聚焦。
我怎么能这样做？
如何选择contenteditable div中的所有文本？
IT技术
javascript
jquery
html
contenteditable
2021-03-09 09:04:22
5个回答
我使用了这个线程中的一些代码来提出我的答案。正如您所要求的那样，它也是 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链接。
例如，在下一个场景中，如果用户将焦点设置为可编辑的 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/
很棒的功能。
我已经对其进行了修改，以通过一个类在任意数量的可编辑 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>
小提琴：
Chrome 确实选择了所有内容，所以我只是添加了 RAF 来解决它：
requestAnimationFrame(() => document.execCommand('selectAll'));
<div id="test" style=" border:solid 1px #D31444" contenteditable="true" onclick="document.execCommand('selectAll',false,null)">12 some text...</div>
根据链接中提供的这个答案判断，您不能在按钮内单击时使用代码。
我所说的甚至在 div 中说 onfocus="document.execCommand('selectAll',false,null)"
然后使用jQuery触发焦点 $('#test').focus();