[英]XY position of text cursor/caret in an editable iframe on key events
[英]Inserting text into an editable IFRAME at the caret position (IE)
我正在努力解决一个实际上很直接的问题:在Internet Explorer中,我想在当前的插入位置插入纯文本。 这对于简单的TEXTAREA元素非常有用,但它并不完全适用于可编辑的IFRAME,这就是我所拥有的。
在我使用的脚本中,我正在从IFRAME的文档创建一个TextRange对象,我用它将文本粘贴到光标位置的HTML。
<iframe id="editable">
<html>
<body>
Some really boring text.
</body>
</html>
</iframe>
<script type="text/javascript">
window.onload = function() {
var iframe = document.getElementById('editable');
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.body.innerHTML = iframe.textContent || iframe.innerHTML;
// Make IFRAME editable
if (doc.body.contentEditable) {
doc.body.contentEditable = true;
}
}
function insert(text) {
var iframe = document.getElementById('editable');
var doc = iframe.contentDocument || iframe.contentWindow.document;
iframe.focus();
if(typeof doc.selection != 'undefined') {
var range = doc.selection.createRange();
range.pasteHTML(text);
}
}
</script>
<input type="button" value="Insert" onClick="insert('foo');"/>
当我在IFRAME中选择一些文本时,选择将替换为“foo” - 这是预期的行为。 但是,当我只将插入符号放在文本中的某个位置时,插入将无效。
这是常见的行为,因为对于我只是将光标放在某处的情况“没有真正的选择”,或者它是IE中可编辑的IFRAME的错误,因为它与简单的TEXTAREA元素一起工作得很好吗?
有解决方法吗?
如果您使用onmousedown
而不是onclick
按钮,您可能会发现它有效。
UPDATE
之所以有所不同,是因为在iframe失去焦点(这会破坏IE中的折叠选择)之后会触发click
事件,而mousedown
之前会触发。
进一步更新
您还可以尝试通过保存/恢复选定的TextRange在IE中修复此问题,因为iframe会丢失/接收焦点。 这样的事情应该有效:
function fixIframeCaret(iframe) {
if (iframe.attachEvent) {
var selectedRange = null;
iframe.attachEvent("onbeforedeactivate", function() {
var sel = iframe.contentWindow.document.selection;
if (sel.type != "None") {
selectedRange = sel.createRange();
}
});
iframe.contentWindow.attachEvent("onfocus", function() {
if (selectedRange) {
selectedRange.select();
}
});
}
}
window.onload = function() {
var iframe = document.getElementById('editable');
fixIframeCaret(iframe);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.