以编程方式在可内容编辑的HTML元素中选择文本？

一尘不染

以编程方式在可内容编辑的HTML元素中选择文本？

javascript

在JavaScript中，可以通过编程方式选择input或textarea元素中的文本。您可以使用来集中输入ipt.focus()，然后使用来选择其内容ipt.select()。您甚至可以使用选择特定范围ipt.setSelectionRange(from,to)。

我的问题是：在contenteditable元素中也有任何方法可以这样做吗？

我发现我可以这样做elem.focus()，可以将插入符号放入contenteditable元素中，但是随后运行elem.select()不起作用（也不行setSelectionRange）。我在网上找不到任何有关它的信息，但也许我在寻找错误的信息…

顺便说一下，如果有什么不同，我只需要它在Google Chrome中工作即可，因为这是Chrome扩展程序。

阅读 271

2020-05-01

共1个答案

一尘不染

如果要在Chrome中选择某个元素的所有内容（无论内容是否可编辑），方法如下。这也可以在Firefox，Safari 3 +，Opera9+（可能也是早期版本）和IE9中使用。您还可以创建字符级别以下的选择。您需要的API是DOMRange当前规范是[DOM Level2，另请参见MDN和Selection，它们被指定为新Range规范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);

2020-05-01