On pressing enter key in IE 11, in contenteditable div cursor focus move to last text in angular 4

See more:

Javascript

AngularJs

I am using contenteditable div with own spell check feature in my angular 4 project. It is working in chrome and other browsers but in IE 11 when i am pressing enter key in the mid of any text of content or after text then cursor goes to the last text element. Below i am sharing my code. IE 11 after rendering DOM creates paragraph for contenteditable div while other browsers do not.

What I have tried:

public static GetCaretPosition(element: any) {
        let caretOffset:number = 0;
        try {

            if (!SpellCheckUtility.isPastingText) {
                if (SpellCheckUtility.w3) {
                    var range = window.getSelection().getRangeAt(0);
                    var preCaretRange = range.cloneRange();
                    preCaretRange.selectNodeContents(element);
                    preCaretRange.setEnd(range.endContainer, range.endOffset);
                    caretOffset = preCaretRange.toString().length;
                } 
            }
            return caretOffset;
        }
        catch (e) {
            return 0;
        }
    }

 public static SetCaretPosition(el: any, sPos: any) {    
        let selection: any;
        var charIndex = 0, range = document.createRange();
        range.setStart(el, 0);
        range.collapse(true);
        var nodeStack = [el], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                if (!foundStart && sPos >= charIndex && sPos <= nextCharIndex) {
                    range.setStart(node, sPos - charIndex);
                    foundStart = true;
                }
                if (foundStart && sPos >= charIndex && sPos <= nextCharIndex) {
                    range.setEnd(node, sPos - charIndex);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }
        selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        selection.select();
    }

and i am calling this on enter pressing code

SpellCheckUtility.curPos = SpellCheckUtility.GetCaretPosition(this);
var docFragment = document.createDocumentFragment();
var newEle = document.createElement('br');
var newEle1;
docFragment.appendChild(newEle);
var range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(docFragment);
range = document.createRange();
range.setStartAfter(newEle);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

newEle1 = document.createElement('span');
newEle1.innerHTML = String.fromCharCode(1);

docFragment.appendChild(newEle1);

range = window.getSelection().getRangeAt(0);
range.deleteContents();
range.insertNode(docFragment);
range = document.createRange();
range.setStartAfter(newEle1);
range.collapse(true);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

//start
this.innerText = this.innerText.replace(/\u0001/, '');
this.innerHTML = this.innerHTML.replace(/\u0001/, '');
//En

SpellCheckUtility.SetCaretPosition(this, SpellCheckUtility.curPos + 1);

return true;