JavaScript：获取contenteditable div中的光标位置

Question

JavaScript：获取contenteditable div中的光标位置

javascriptjquerycontenteditablecursor-positiongetcaretpos

3

我对JavaScript还是很新的，希望有人能帮我解决以下问题：

主要是针对IE 8的解决方案 - 如果可以涵盖其他浏览器/版本就更好了。我有一个只包含一个可编辑div的页面，它是动态创建的，包含文本和HTML标签。在页面中，我想添加一个按钮，将某些文本插入到此div的光标位置。

目前，我有以下代码，只要选择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>

感谢你对此的任何帮助，Tim。

- user2571510

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

您的问题是，在IE中，<button>元素会在click事件触发时夺取焦点并破坏选择。您可以使<button>不可选择，这将防止它能够获得焦点。在IE中，使用unselectable属性来实现此功能：

<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://dev59.com/CGw15IYBdhLWcg3wT6H2#6691294 最后一点说明： contenteditable不是布尔属性，因此严格来说您应该给它赋一个值（例如<div contenteditable="true">），尽管在我尝试的所有浏览器中，<div contenteditable>都可以工作.