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

发布于 2024-10-22 08:00:54 字数 1380 浏览 0 评论 0原文

我正在努力解决一个实际上很简单的问题：在 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 元素配合得很好？

有解决方法吗？

原文

I'm struggling with an actually straighforward problem: In Internet Explorer I want to insert plain text at the current caret position. This works really fine for simple TEXTAREA elements but it doesn't entirely work for editable IFRAMEs, which is what I have.

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 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. 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?

Is there a workaround?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

街角迷惘 2024-10-29 08:00:54

如果您在按钮中使用 onmousedown 而不是 onclick，您可能会发现它有效。

更新

造成差异的原因是 click 事件在 iframe 失去焦点后触发（这会破坏 IE 中的折叠选择），而 mousedown code> 之前触发。

进一步更新

您还可以尝试在 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);
};

You may find it works if you use onmousedown rather than onclick in your button.

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.

FURTHER UPDATE

You could also try fixing this in IE by saving/restoring the selected TextRange as the iframe loses/receives focus. 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);
};

回复收藏 0 原文

~没有更多了~