以编程方式选择内容可编辑的HTML元素中的文本？
在JavaScript中，可以以编程方式选择input或textarea元素中的文本。您可以使用ipt.focus()聚焦输入，然后使用ipt.select()选择其内容。您甚至可以使用ipt.setSelectionRange(from,to)选择特定的范围。
我的问题是:有没有办法在contenteditable元素中做到这一点？
我发现我可以执行elem.focus()，将插入符号放在contenteditable元素中，但随后运行elem.select()不起作用(setSelectionRange也不起作用)。我在网上找不到任何关于它的东西，但也许我在搜索错误的东西...
顺便说一句，如果它有什么不同，我只需要它在Google Chrome中工作，因为这是一个Chrome扩展。
回答 4
Stack Overflow用户
发布于 2011-05-27 17:05:21
如果你想在Chrome中选择一个元素的所有内容(无论是否可编辑)，方法如下。这也适用于火狐、Safari 3+、Opera 9+ (可能是更早的版本)和IE9。你也可以创建字符级别的选择。您需要的API是DOM Range (当前规范是DOM Level 2，另请参阅MDN)和Selection，它被指定为new Range spec (MDN docs)的一部分。
function selectElementContents(el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
var el = document.getElementById("foo");
selectElementContents(el);Stack Overflow用户
发布于 2020-04-15 05:46:36
现代的做事方式是这样的。有关MDN的更多详细信息
document.addEventListener('dblclick', (event) => {
window.getSelection().selectAllChildren(event.target)
})<div contenteditable="true">Some text</div>
Stack Overflow用户
发布于 2013-01-13 00:14:32
Rangy允许您使用相同的代码跨浏览器执行此操作。Rangy是用于选择的DOM方法的跨浏览器实现。它经过了良好的测试，使这一点变得不那么痛苦。我拒绝触摸没有它的知足。
你可以在这里找到rangy：
http://code.google.com/p/rangy/
在你的项目中，即使浏览器是IE 8或更早版本，并且有一个完全不同的本机API来进行选择，你也可以随时写下这段代码：
var range = rangy.createRange();
range.selectNodeContents(contentEditableNode);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);其中"contentEditableNode“是具有contenteditable属性的DOM节点。您可以像这样获取它：
var contentEditable = document.getElementById('my-editable-thing');或者，如果jQuery已经是您项目的一部分，并且您觉得它很方便：
var contentEditable = $('.some-selector')[0];https://stackoverflow.com/questions/6139107
复制相似问题
腾讯云开发者
