小编典典

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

javascript

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

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

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

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


阅读 309

收藏
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