получить и установить позицию курсора в редактируемом содержимом div - PullRequest
Новая
       20

получить и установить позицию курсора в редактируемом содержимом div

1 голос
/ 24 января 2020

в редактируемом содержимом div, я получу sh получить и установить позицию курсора, но без учета дочерних элементов (например, , , et c) .

для получения, я нахожу это решение: Получить начальное и конечное смещение диапазона относительно его родительского контейнера

, но для набора я не знаю.

пожалуйста, вы можете мне помочь.

спасибо

1 Ответ

2 голосов
/ 24 января 2020

Вы можете использовать rangy , чтобы определить его самостоятельно, вот так: 

var selector = document.querySelector('[contenteditable]');

var setCaretIndex = function (index) {
    var charIndex = 0, stop = {};

    var traverseNodes = function (node) {
        if (node.nodeType === 3) {
            var nextCharIndex = charIndex + node.length;
            if (index >= charIndex && index <= nextCharIndex) {
                rangy.getSelection().collapse(node, index - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        }

        // Count an empty element as a single character. The list below may not be exhaustive.
        else if (node.nodeType === 1 && /^(input|br|img|col|area|link|meta|link|param|base)$/i.test(node.nodeName)) {
            charIndex += 1;
        } else {
            var child = node.firstChild;
            while (child) {
                traverseNodes(child);
                child = child.nextSibling;
            }
        }
    };

    try {
        traverseNodes(selector);
    } catch (ex) {
        if (ex !== stop) throw ex;
    }
};

Чтобы использовать эту функцию, вам нужно сначала сфокусировать редактор: 

selector.focus();

Затем указание индекса для установки положения курсора: 

setCaretIndex(3);

Fiddle

...