JavaScript:在contenteditable div中获取光标位置 [英] JavaScript: get cursor position in contenteditable div
问题描述
我对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>
谢谢您的帮助，蒂姆
您的问题是<button>元素会抢占焦点并在IE中触发click事件时破坏选择.您可以将<button>设为不可选择，这将阻止它能够获得焦点.使用 unselectable属性在IE中:
<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>在我尝试过的所有浏览器中都可以使用.
I am pretty new to JavaScript and hope someone here can help me with the following:
Primarily looking for a solution in IE 8 - if it can cover other browsers / versions even better. I have a page with only one contenteditable div that is created dynamically and contains both text and HTML tags. On the page I want to add a button that inserts certain text at the cursor position into this div.
So far I have the following code which works fine as long as I select a text in the div but if I just position my cursor there without selecting anything it inserts my text outside the div.
How can I get it to add my text always at the cursor position the same way it does now at the selection position ? (I don't even need it to replace a selection as it would only be required at the cursor position. Also, this would only be required for one specific div.)
My Code:
<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>
Thanks for any help with this, Tim
Your problem is that the <button> element steals the focus and destroys the selection by the time the click event has fired in IE. You could make the <button> unselectable, which would prevent it being able to receive focus. This is done using the unselectable attribute in IE:
<button type="button" unselectable="on" onclick="test()">Test</button>
Demo: http://jsbin.com/aqAYUwu/5
Another alternative which is less good in my view is to use the mousedown event instead and prevent the default action:
<button type="button" unselectable="on"
onmousedown="test(); return false">Test</button>
You can find a cross-browser function to insert HTML at the current cursor position in a contenteditable element here:
https://stackoverflow.com/a/6691294/96100
One final note: contenteditable isn't a boolean attribute so strictly speaking you should give it a value (i.e. <div contenteditable="true">), although <div contenteditable> does work in all browsers I've tried it in.
这篇关于JavaScript:在contenteditable div中获取光标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
