При нажатии клавиши enter в IE 11, в contenteditable div фокус курсора перемещается на последний текст в angular 4
Я использую contenteditable div с собственной функцией проверки орфографии в своем проекте angular 4. Он работает в chrome и других браузерах, но в IE 11, когда я нажимаю клавишу enter в середине любого текста контента или после текста, курсор переходит к последнему текстовому элементу. Ниже я делюсь своим кодом. IE 11 после рендеринга DOM создает абзац для contenteditable div, в то время как другие браузеры этого не делают.
Что я уже пробовал:
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(); }
и я вызываю это на enter нажав код
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;