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

Question

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

And*_*sch 4 javascript iframe internet-explorer textrange

我正在努力解决一个实际上很直接的问题:在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');"/>

Run Code Online (Sandbox Code Playgroud)

当我在IFRAME中选择一些文本时,选择将替换为"foo" - 这是预期的行为.但是,当我将插入符号放在文本中的某个位置时,插入将无效.

这是常见的行为,因为对于我只是将光标放在某处的情况"没有真正的选择",或者它是IE中可编辑的IFRAME的错误,因为它与简单的TEXTAREA元素一起工作得很好吗？

有解决方法吗？

Answer 1

Tim*_*own 6

如果您使用onmousedown而不是onclick按钮,则可能会发现它有效.

UPDATE

这会产生影响的原因是,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);
};

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，7 月前
查看次数：	7806 次
最近记录：	14 年，7 月前