4

私は実際に簡単な問題に苦しんでいます: Internet Explorer で、現在のキャレット位置にプレーン テキストを挿入したいと考えています。これは、単純な TEXTAREA 要素では非常にうまく機能しますが、私が持っている編集可能な IFRAME では完全には機能しません。

私が使用するスクリプトでは、テキストを HTML としてカーソル位置に貼り付けるために使用する IFRAME のドキュメントから TextRange オブジェクトを作成しています。

<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」に置き換えられます。これは予期された動作です。しかし、キャレットをテキストのどこかに置くと、挿入が機能しません。

単純な TEXTAREA 要素でうまく機能するため、カーソルをどこかに置くだけの場合に「実際の選択」がないため、これは一般的な動作ですか、それとも IE の編集可能な IFRAME のバグですか?

回避策はありますか?

4

1 に答える 1

6

ボタンonmousedownではなく使用すると、機能する場合があります。onclick

アップデート

これが違いを生む理由はclick、iframeがフォーカスを失った後にイベントが発生する（IEで折りたたまれた選択が破壊される）のに対し、イベントはmousedown前に発生するためです。

さらなるアップデート

iframeがフォーカスを失う/受け取るときに、選択したTextRangeを保存/復元することで、IEでこれを修正することもできます。このようなものが機能するはずです：

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);
};
于 2011-03-17T12:17:38.053 に答える