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

Question

我有满足感的div如下所示。

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

我需要的是，当我点击div时，所有文本都会自动被选中。你能帮我解决一下吗？

Answer 1

这样做。计时器适用于Chrome和Safari，因为在这些浏览器中，选择整个元素的本机浏览器行为似乎在焦点事件之后触发，从而覆盖选择代码的效果，除非推迟到焦点事件之后：

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);
};

Answer 2

试试这个：

<div style="border:solid 1px #D31444"
     contenteditable="true"
     onclick="document.execCommand('selectAll',false,null)">12 some text...</div>

Answer 3

focus上div事件的问题在于它无法触发，因为它认为div不应该是可编辑的。 DOM中的可修改内容在后台标有tabindex，因此为了让您的div收到onfocus事件，您需要明确声明div的{​​{1}}属性。 HTML：

tabindex

这应该适用于<div style=" border:solid 1px #D31444" contenteditable="true" tabindex="1" onfocus="document.execCommand('selectAll',false,null)" >12 some text...</div> 。