Question

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

以上两个命令在 Chrome / Firefox 中可以很好地工作，但是我无法在IE11中使用它。

document.execCommand("delete")仅在我们选择一定范围的文本时才在IE中起作用。如何使它在Chrome中像它一样工作（例如，使用退格键）。

以及无论如何，我如何在IE中使用document.execCommand("insertText", false, insertString)。

Answer 1

对于IE中的insertText，有解决方法：

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

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

Answer 2

我发现您找到了关于insertText的解决方法。

以下是我建议在IE中删除的信息。

您可以从the official document中看到Delete的定义是：

删除：删除当前选择。

IE11和Google Chrome之间的性能差异可能很小，例如退格效果。

我认为，如果要使删除功能像在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;
    }

在线程上的代码上方：Simulate backspace button JS

我已经尝试了代码，您可以从捕获中看到效果：result

无法在IE11 div内容中删除或插入文本使用execCommand可编辑

2 个答案: