Javascript Contenteditable - установить курсор/карет для индексации

Ответ 1

Вот ответ, адаптированный из Сохранение изменений объектов диапазона после выбора в HTML. Имейте в виду, что это не так идеально по нескольким причинам (как и MaxArt, который использует тот же подход): во-первых, учитываются только текстовые узлы, что означает, что разрывы строк подразумеваются <br>, а элементы блока не включены в индекс; во-вторых, рассматриваются все текстовые узлы, даже те элементы, которые скрыты CSS или внутри элементов <script>; в-третьих, последовательные символы пробела, которые рухнули на странице, все включены в индекс; наконец, правила IE <= 8 отличаются друг от друга, поскольку он использует другой механизм.

var setSelectionByCharacterOffsets = null;

if (window.getSelection && document.createRange) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

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

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    };
}

Ответ 2

range.setStart и range.setEnd могут использоваться в текстовых узлах, а не в узлах элементов. Или же они вызовут исключение DOM. Итак, что вам нужно сделать, это

range.setStart(contentEditableElement.firstChild, index);

Я не понимаю, что вы сделали для IE8 и ниже. Где вы хотели использовать index?

В целом, ваш код выходит из строя, если содержимое узлов больше, чем один текст node. Это может произойти для узлов с isContentEditable === true, поскольку пользователь может вставлять текст из Word или других мест или создавать новую строку и т.д.

Здесь адаптация того, что я сделал в моей структуре:

var setSelectionRange = function(element, start, end) {
    var rng = document.createRange(),
        sel = getSelection(),
        n, o = 0,
        tw = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null);
    while (n = tw.nextNode()) {
        o += n.nodeValue.length;
        if (o > start) {
            rng.setStart(n, n.nodeValue.length + start - o);
            start = Infinity;
        }
        if (o >= end) {
            rng.setEnd(n, n.nodeValue.length + end - o);
            break;
        }
    }
    sel.removeAllRanges();
    sel.addRange(rng);
};

var setCaret = function(element, index) {
    setSelectionRange(element, index, index);
};

Трюк здесь заключается в использовании функции setSelectionRange, которая выбирает диапазон текста внутри и элемента - с помощью start === end. В элементах contentEditable это помещает каретку в нужное положение.

Это должно работать во всех современных браузерах и для элементов, которые имеют не только текст node как потомок. Я позволю вам добавить проверки для start и end в подходящий диапазон.

Для IE8 и ниже все немного сложнее. Все будет выглядеть примерно так:

var setSelectionRange = function(element, start, end) {
    var rng = document.body.createTextRange();
    rng.moveToElementText(element);
    rng.moveStart("character", start);
    rng.moveEnd("character", end - element.innerText.length - 1);
    rng.select();
};

Проблема здесь в том, что innerText не подходит для такого рода вещей, поскольку некоторые белые пробелы рушится. Все прекрасно, если есть только текст node, но прикручены к чему-то более сложному, как те, что вы получаете в contentEditable.

IE8 не поддерживает textContent, поэтому вам нужно подсчитать символы, используя TreeWalker. Но чем снова IE8 не поддерживает TreeWalker, так что вам нужно пройти дерево DOM самостоятельно...

Мне все еще нужно это исправить, но почему-то я сомневаюсь, что когда-нибудь буду. Даже если бы я сделал код polyfill для TreeWalker в IE8 и ниже...

Ответ 3

Вот мое улучшение по поводу ответа Тима. Он удаляет оговорку о скрытых символах, но остальные оговорки остаются:

• учитываются только текстовые узлы (разрывы строк, подразумеваемые <br> и блочные элементы не включены в индекс)
• рассматриваются все текстовые узлы, даже те элементы, которые скрыты CSS или внутри элементов
• Правила IE <= 8 отличаются друг от друга, поскольку он использует другой механизм.

Код:

var setSelectionByCharacterOffsets = null;

if (window.getSelection && document.createRange) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            if (node.nodeType == 3) {
                var hiddenCharacters = findHiddenCharacters(node, node.length)
                var nextCharIndex = charIndex + node.length - hiddenCharacters;

                if (!foundStart && start >= charIndex && start <= nextCharIndex) {
                    var nodeIndex = start-charIndex
                    var hiddenCharactersBeforeStart = findHiddenCharacters(node, nodeIndex)
                    range.setStart(node, nodeIndex + hiddenCharactersBeforeStart);
                    foundStart = true;
                }
                if (foundStart && end >= charIndex && end <= nextCharIndex) {
                    var nodeIndex = end-charIndex
                    var hiddenCharactersBeforeEnd = findHiddenCharacters(node, nodeIndex)
                    range.setEnd(node, nodeIndex + hiddenCharactersBeforeEnd);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    setSelectionByCharacterOffsets = function(containerEl, start, end) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", end);
        textRange.moveStart("character", start);
        textRange.select();
    };
}

var x = document.getElementById('a')
x.focus()
setSelectionByCharacterOffsets(x, 1, 13)

function findHiddenCharacters(node, beforeCaretIndex) {
    var hiddenCharacters = 0
    var lastCharWasWhiteSpace=true
    for(var n=0; n-hiddenCharacters<beforeCaretIndex &&n<node.length; n++) {
        if([' ','\n','\t','\r'].indexOf(node.textContent[n]) !== -1) {
            if(lastCharWasWhiteSpace)
                hiddenCharacters++
            else
                lastCharWasWhiteSpace = true
        } else {
            lastCharWasWhiteSpace = false   
        }
    }

    return hiddenCharacters
}