JavaScript:在contenteditable div中获取游标位置

时间:2013-10-27 16:31:25

标签: javascript jquery contenteditable cursor-position getcaretpos

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

感谢您对此提供任何帮助,Tim

1 个答案:

答案 0 :(得分:5)

您的问题是<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>适用于所有浏览器我都是试过了。