Unable to delete or insert Text in IE11 div contentEditable using execCommand

Question

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

The above two commands work perfectly fine in Chrome/Firefox but i'm unable to use it in IE11.

document.execCommand("delete") only works in IE if we select a range of text. How do i get it to work like it in Chrome(i.e like using backspace).

And also anyway how I could use document.execCommand("insertText", false, insertString) in IE.

Possible duplicate of [internet explorer alternative to document.execCommand("insertText",...), for text insertion that can be undone/redone by the user](https://stackoverflow.com/questions/20124212/internet-explorer-alternative-to-document-execcommandinserttext-for-tex) — connexo, Nov 11 '18 at 09:13
it's not a duplicate, i did visit that link. there is no info on "document.execCommand("delete")" — ashwin1014, Nov 12 '18 at 11:02

ashwin1014 · Answer 1 · 2018-11-14T12:31:23.507

3

for insertText in IE, there is workaround:

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

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

edited Nov 14 '18 at 12:31

answered Nov 13 '18 at 09:55

ashwin1014

351
1
5
18

was using `document.execCommand('insertText', false, text);` earlier which was not working in IE. `document.execCommand("paste", false, text);` worked in IE perfectly. – Adi Aug 30 '19 at 05:34

score 0 · Answer 2 · answered Nov 14 '18 at 09:09

I've seen that you've found the workround about insertText.

And below is my advice to delete in IE.

You could see from the official document that the definition of Delete is:

delete:Deletes the current selection.

Maybe there is small performance difference between IE11 and Google Chrome like the backspace effect.

In my opinion, if you want to make the delete function work like using backspace in IE11, you could create another function to achieve this.

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;
    }

Above code from the thread:Simulate backspace button JS

I've tried the code and you could see the effect from the capture:result

i did go through this before, it works as long as there is no carriage return. If i press the enter key 2-3 times, this function does not work(carret position is not incremented on new line). Works only if there is continuous typing. — ashwin1014, Nov 14 '18 at 12:29

Unable to delete or insert Text in IE11 div contentEditable using execCommand

2 Answers2