Невозможно удалить или вставить текст в IE11 div contentEditable, используя execCommand

Question

document.execCommand("delete");
document.execCommand("insertText", false, insertString);

Две вышеупомянутые команды прекрасно работают в Chrome / Firefox , но я не могу использовать его в IE11.

document.execCommand("delete") работает только в IE, если мы выбираем диапазон текста. Как мне заставить его работать как в Chrome (например, использовать backspace).

А также в любом случае, как я могу использовать document.execCommand("insertText", false, insertString) в IE.

Answer 1

Я видел, что вы нашли обходной путь для insertText.

А ниже мой совет удалить в IE.

Вы можете увидеть из официального документа , что определение удаления:

delete: удаляет текущий выбор.

Возможно, между IE11 и Google Chrome существует небольшая разница в производительности, например, эффект возврата.

По моему мнению, если вы хотите, чтобы функция удаления работала так же, как использование backspace в IE11, вы можете создать другую функцию для достижения этой цели.

HTML.

<div id="testdiv" contenteditable="true">
    Select something here and after click on delete.
</div>
<input type="button" value="Delete" onclick="backSpace();" />

JS.

function backSpace() {
        p = document.getElementById("testdiv");
        c = getCaretPosition(p);
        console.log(getCaretPosition(p));
        str = $("#testdiv").html();
        if (c > 0 && c <= str.length) {
            $("#testdiv").focus().html(str.substring(0, c - 1) + str.substring(c, str.length));

            p.focus();
            var textNode = p.firstChild;
            var caret = c - 1;
            var range = document.createRange();
            range.setStart(textNode, caret);
            range.setEnd(textNode, caret);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }

    $.fn.setCursorPosition = function (pos) {
        this.each(function (index, elem) {
            if (elem.setSelectionRange) {
                elem.setSelectionRange(pos, pos);
            } else if (elem.createTextRange) {
                var range = elem.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        });
        return this;
    };

    function getCaretPosition(editableDiv) {
        var caretPos = 0,
            sel, range;
        if (window.getSelection) {
            sel = window.getSelection();
            if (sel.rangeCount) {
                range = sel.getRangeAt(0);
                if (range.commonAncestorContainer.parentNode == editableDiv) {
                    caretPos = range.endOffset;
                }
            }
        } else if (document.selection && document.selection.createRange) {
            range = document.selection.createRange();
            if (range.parentElement() == editableDiv) {
                var tempEl = document.createElement("span");
                editableDiv.insertBefore(tempEl, editableDiv.firstChild);
                var tempRange = range.duplicate();
                tempRange.moveToElementText(tempEl);
                tempRange.setEndPoint("EndToEnd", range);
                caretPos = tempRange.text.length;
            }
        }
        return caretPos;
    }

Выше кода из потока: Имитация кнопки возврата назад JS

Я пробовал код, и вы могли видеть эффект от захвата: результат

Answer 2

для вставки текста в IE, есть обходной путь:

 let isIE = function() {
    return document.all || (!!window.MSInputMethodContext && !!document.documentMode);
 }

 let text = "Hello"
 if(isIE()) document.execCommand("paste", false, text);