Member 13820139 Ответов: 0

При нажатии клавиши 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;

0 Ответов