gpt4 book ai didi

javascript - 在插入符位置 (IE) 将文本插入可编辑的 IFRAME

转载 作者:塔克拉玛干 更新时间:2023-11-02 20:28:32 24 4
gpt4 key购买 nike

我正在努力解决一个实际上很简单的问题:在 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,您可能会发现它有效。

更新

之所以会有所不同,是因为 click 事件在 iframe 失去焦点(这会破坏 IE 中的折叠选择)之后触发,而 mousedown 会在此之前触发。

进一步更新

您也可以尝试在 IE 中修复此问题,方法是在 iframe 失去/接收焦点时保存/恢复所选的 TextRange。这样的事情应该有效:

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);
};

关于javascript - 在插入符位置 (IE) 将文本插入可编辑的 IFRAME,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5337752/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com