我对 JavaScript 很陌生,希望这里有人可以帮助我解决以下问题:
主要是在IE 8中寻找解决方案 - 如果它可以更好地覆盖其他浏览器/版本。我有一个页面只有一个动态创建的可内容可编辑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>
设置为不可选择,这会阻止它接收焦点。这是使用 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://stackoverflow.com/a/6691294/96100
最后一点:contenteditable
不是布尔属性,所以严格来说你应该给它一个值(即 <div contenteditable="true">
),尽管<div contenteditable>
确实适用于我尝试过的所有浏览器。