在插入位置（IE）将文本插入可编辑的IFRAME

Question

I'm struggling with an actually straighforward problem: In Internet Explorer I want to insert plain text at the current caret position. 我正在努力解决一个实际上很直接的问题：在Internet Explorer中，我想在当前的插入位置插入纯文本。 This works really fine for simple TEXTAREA elements but it doesn't entirely work for editable IFRAMEs, which is what I have. 这对于简单的TEXTAREA元素非常有用，但它并不完全适用于可编辑的IFRAME，这就是我所拥有的。

In the script I use I am creating a TextRange object from the document of the IFRAME which I use to paste the text as HTML at the cursor position. 在我使用的脚本中，我正在从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');"/>

When I select some text in the IFRAME, the selection will be replaced with "foo" - this is expected behaviour. 当我在IFRAME中选择一些文本时，选择将替换为“foo” - 这是预期的行为。 But when I just place the caret somewhere in the text, the insertion won't work. 但是，当我只将插入符号放在文本中的某个位置时，插入将无效。

Is this common behaviour, as there is "no real selection" for the case that I just place the cursor somewhere or is it a bug with editable IFRAMEs in IE, since it works pretty well with simple TEXTAREA elements? 这是常见的行为，因为对于我只是将光标放在某处的情况“没有真正的选择”，或者它是IE中可编辑的IFRAME的错误，因为它与简单的TEXTAREA元素一起工作得很好吗？

Is there a workaround? 有解决方法吗？

Answer 1

You may find it works if you use onmousedown rather than onclick in your button. 如果您使用onmousedown而不是onclick按钮，您可能会发现它有效。

UPDATE UPDATE

The reason why this makes a difference is that the click event fires after the iframe has lost focus (which destroys a collapsed selection in IE) whereas mousedown fires before. 之所以有所不同，是因为在iframe失去焦点（这会破坏IE中的折叠选择）之后会触发click事件，而mousedown之前会触发。

FURTHER UPDATE 进一步更新

You could also try fixing this in IE by saving/restoring the selected TextRange as the iframe loses/receives focus. 您还可以尝试通过保存/恢复选定的TextRange在IE中修复此问题，因为iframe会丢失/接收焦点。 Something like this should work: 这样的事情应该有效：

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

在插入位置（IE）将文本插入可编辑的IFRAME

问题描述

1 个解决方案

解决方案1
6 已采纳 2011-03-17 12:17:38

在插入位置（IE）将文本插入可编辑的IFRAME

问题描述

1 个解决方案

解决方案1 6 已采纳 2011-03-17 12:17:38

解决方案1
6 已采纳 2011-03-17 12:17:38