Myujth

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.

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

for insertText in IE, there is workaround:

 let isIE = function() (!!window.MSInputMethodContext && !!document.documentMode);
 

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