Вставка текста в редактируемый кадр в позиции каретки (IE)

Question

Вставка текста в редактируемый кадр в позиции каретки (IE)

Я борюсь с действительно простой проблемой: в Internet Explorer я хочу вставить обычный текст в текущей позиции каретки. Это очень хорошо работает для простых элементов TEXTAREA, но не совсем работает для редактируемых IFRAME, что я и имею.

В скрипте, который я использую, я создаю объект TextRange из документа IFRAME, который я использую для вставки текста в виде 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" - это ожидаемое поведение. Но когда я просто помещаю курсор в текст, вставка не будет работать.

Является ли это обычным поведением, поскольку "случайного выбора" не существует для случая, когда я просто помещаю курсор куда-то, или это ошибка с редактируемыми IFRAME в IE, поскольку он довольно хорошо работает с простыми элементами TEXTAREA?

Есть ли обходной путь?

4

javascript internet-explorer iframe textrange

Источник

user664094 17 мар '11 в 10:23

1 ответ

Решение

Другие вопросы по тегам javascript internet-explorer iframe textrange

user96100 17 мар '11 в 12:17 2011-03-17 12:17 · Accepted Answer · 2011-03-17 12:17

Вы можете найти это работает, если вы используете onmousedown скорее, чем onclick в твоей кнопке.

ОБНОВИТЬ

Причина, по которой это имеет значение, заключается в том, что click событие запускается после того, как iframe потерял фокус (который разрушает выделенную область в IE), тогда как mousedown пожары раньше.

ДАЛЬНЕЙШЕЕ ОБНОВЛЕНИЕ

Вы также можете попытаться исправить это в IE, сохранив / восстановив выбранный TextRange, поскольку 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);
};