在IE浏览器中，在可编辑的IFRAME中插入文本到插入符位置

Question

在IE浏览器中，在可编辑的IFRAME中插入文本到插入符位置

javascriptinternet-exploreriframetextrange

4

我有一个很简单的问题需要解决：在Internet Explorer中，我想在当前光标位置插入纯文本。对于简单的TEXTAREA元素，这确实非常好用，但对于可编辑的IFRAME来说并不完全适用，而我所使用的就是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的一个bug，因为它在简单的TEXTAREA元素中表现得非常好？

是否有解决方法？

- Andreas Pasch

我也有同样的问题。WordPress 能够做到，所以肯定有办法。 - Alex

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

如果你在按钮上使用onmousedown而不是onclick，你可能会发现它起作用了。

更新

这样做的原因是click事件在iframe失去焦点后触发（这会破坏IE中的已折叠选择），而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);
};