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

Question

我对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>

蒂姆，谢谢你的帮助

Answer 1

您的问题是<button>元素会抢占焦点，并在IE中触发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>

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

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

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

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

问题描述

1 个解决方案

解决方案1
5 2013-10-28 10:42:37

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

问题描述

1 个解决方案

解决方案1 5 2013-10-28 10:42:37

解决方案1
5 2013-10-28 10:42:37