JavaScript：在 contenteditable div 中获取光标位置答案

【问题标题】：JavaScript: get cursor position in contenteditable divJavaScript：在 contenteditable div 中获取光标位置
【发布时间】：2013-10-28 18:42:37
【问题描述】：

我对 JavaScript 很陌生，希望这里有人可以帮助我解决以下问题：

主要是在 IE 8 中寻找解决方案——如果它可以更好地覆盖其他浏览器/版本。我有一个页面，其中只有一个 contenteditable div，它是动态创建的，并且包含文本和 HTML 标记。在页面上，我想添加一个按钮，将光标位置处的某些文本插入到这个 div 中。

到目前为止，只要我在 div 中选择一个文本，我的以下代码就可以正常工作，但是如果我只是将光标放在那里而不选择任何内容，它会将我的文本插入到 div 之外。

如何让它始终在光标位置添加我的文本，就像现在在选择位置一样？（我什至不需要它来替换选择，因为它只需要在光标位置。而且，这只需要一个特定的 div。）

我的代码：

<html>
<head>
<script type="text/javascript">
    function test()
    {
        var input = "TEST";
        document.selection.createRange().pasteHTML(input);
    }
</script>

</head>
<body>
    <div id="myDiv" contenteditable>This is a test text.</div><br />
    <button type="button" onclick="test()">Test</button>
</body>
</html>

感谢您对此提供的任何帮助，蒂姆

【问题讨论】：

标签： javascript jquery contenteditable cursor-position getcaretpos

【解决方案1】：

您的问题是 <button> 元素在 IE 中触发 click 事件时窃取了焦点并破坏了选择。您可以将<button> 设为不可选择，这将阻止它获得焦点。这是在 IE 中使用 unselectable attribute 完成的：

<button type="button" unselectable="on" onclick="test()">Test</button>

演示：http://jsbin.com/aqAYUwu/5

在我看来不太好的另一种选择是使用mousedown 事件并阻止默认操作：

<button type="button" unselectable="on"
    onmousedown="test(); return false">Test</button>

您可以在此处找到一个跨浏览器功能，在 contenteditable 元素的当前光标位置插入 HTML：

https://stackoverflow.com/a/6691294/96100

最后一点：contenteditable 不是布尔属性，所以严格来说你应该给它一个值（即<div contenteditable="true">），尽管<div contenteditable> 确实适用于我尝试过的所有浏览器。

【讨论】：

谢谢。 cmets 和链接非常有用，即使它似乎仍然失去焦点并在我的 div 上方插入文本（当我之前选择了文本部分时它仍然可以正常工作）。有没有办法可以强制它插入特定的 div 以避免这种情况？
@user2571510：JSBin 链接不适合您吗？ IE 7 对我来说没问题。
谢谢，蒂姆。关于获得焦点的按钮，您是对的。我的问题是有问题的按钮位于引导框对话框（如提示框）内，并且该按钮只有一个类但没有 id，所以我不知道如何向它添加不可选择的属性。
@user2571510：您可以通过类名获取它并添加unselectable 属性。由于您已将此问题标记为 jQuery，因此您可以使用类似 $("button.someClass").attr("unselectable", "on"); 的内容。
unselectable救了我的命