javascript - 当焦点/单击时选择 contenteditable div 中的所有文本

Question

这个问题已经有答案了:

Programmatically select text in a contenteditable HTML element? (6 个回答)

已关闭 7 年前。

我有如下的 contenteditable div。

<div style=" border:solid 1px #D31444" contenteditable="true">12 some text...</div>

我需要的是，当我点击 div 时，所有文本都会自动被选中。您能给我解决方案吗？

Answer 1

这样就可以了。 Chrome 和 Safari 存在计时器，因为在这些浏览器中，选择整个元素的 native 浏览器行为似乎在焦点事件之后触发，从而覆盖选择代码的效果，除非推迟到焦点事件之后:

var div = document.getElementById("editable");

div.onfocus = function() {
    window.setTimeout(function() {
        var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(div);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(div);
            range.select();
        }
    }, 1);
};