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

我有如下可编辑的div

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

12一些文本。。。

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

试试这个：

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

12一些文本。。。

这样就可以了。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);
};

---

focus

事件在

div

上的问题是，它无法触发，因为它认为

div

不应编辑。DOM中的可编辑内容在后台被标记为

tabindex

，因此为了让您的div接收

onfocus

事件，您需要显式声明

div

的

tabindex

属性。 HTML:

12一些文本。。。

---

这应该适用于

onfocus

这最好使用

focus

事件，因为每当用户试图单击定位插入符号时，使用click事件都会突出显示所有内容，但这取决于问题的作者想要什么。我刚刚在Chrome版本24.0.1312.57 OS X中尝试过这个。使用jQuery 1.9.1，绑定到

焦点

不起作用。绑定到

click

事件时没有选择文本：

$（'.editable'）。on（'click'，function（）{document.execCommand（'selectAll'，false，null）；}）可能会有帮助？当用户使用“Tab”键导航到contenteditable div时，这不起作用。是否也应该有一种方法使用preventDefault或stopPropagation来实现这一点？使用setTimeout似乎有点难看，因为你必须打破调用堆栈。@Adam:我不这么认为。您不想阻止可编辑元素接收焦点，因此
preventDefault（）
已退出
StopRopagation（）
只会阻止事件传播到下一个目标，这对这一点没有用处。tim，你为什么不是主持人？@think123：三个原因：我没有提出自己的观点，我真的不想提出，我也不知道我是否会做得很好。@Jonz:
window.getSelection（）
和
document.createRange（）
，这两种现在都已标准化，在大多数浏览器中都受支持，但IE<9不受支持。IE确实有自己的选择/范围API，可通过
document.body.createTextRange（）
在此处访问。这个答案提供了最“正确”的方法来执行您想要的操作：这样做会导致它选择整个文档。您可以使用相同的代码，但我建议对
150
ms使用
setTimeout
，这样它就不会选择整个文档。希望这对大家都有帮助！
<div style=" border:solid 1px #D31444" contenteditable="true" tabindex="1" onfocus="document.execCommand('selectAll',false,null)" >12 some text...</div>