jquery Установка курсора на последнюю позицию в contenteditable div с правильной позицией курсора - PullRequest
Новая
       63

jquery Установка курсора на последнюю позицию в contenteditable div с правильной позицией курсора

0 голосов
/ 12 ноября 2018

Я перемещаюсь между contenteditable div с помощью клавиш со стрелками, и я использую значение позиции курсора (window.getSelection().anchorOffset), чтобы определить значение позиции курсора и узнать, когда я достиг начала или конца div , Поскольку я двигаюсь влево (СТРЕЛКА ВЛЕВО, когда курсор находится в позиции 0), я хочу, чтобы курсор переместился в правый конец предыдущего div. Я нашел ответ Тима Дауна , который действительно позволяет мне переместить курсор на предыдущий div. Затем, используя дополнительный комментарий от Тима, я смог поместить курсор на правый край предыдущего div. Однако я обнаружил, что указанное значение положения курсора не соответствует фактическому положению курсора (в Chrome).

В ответ на дубликат вопроса , Mr_Green опубликовал скрипку, которую я изменил, чтобы показать проблему . 

var result = $('#result');

$('#result').keydown(function(e) {
    curposondown = window.getSelection().anchorOffset;
    console.log(`cursorposondown: ${curposondown}`);
});
$('#result').keyup(function(e) {
    console.log(e);
    var element = e.currentTarget;
    var key = e.which;
    var text = element.textContent;
    var pos = window.getSelection().anchorOffset;
    console.log(`text: ${text}`);
    console.log(`text length: ${text.length}`);
    console.log(`char: ${e.which}`);
    console.log(`cursor: ${pos}`);
});

$('.click').click(function () {
    var preHtml = result.html();
    result.html(preHtml + "hello");

    result.focus();
    placeCaretAtEnd( document.getElementById("result") );
});

function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined"
            && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

После ввода нескольких букв, наблюдая за консолью (Инструменты разработчика), используйте клавиши со стрелками ВЛЕВО и ВПРАВО, чтобы перемещаться между буквами и видеть, что выводится для каждой клавиши / нажатия клавиш. Обратите внимание, что позиция курсора показывает позицию до перемещения курсора на клавиатуре, а затем после перемещения на клавиатуре. (Вот почему я добавил хук «ключ вниз», чтобы различать первый раз, когда курсор переместился в 0, который не должен перемещаться в предыдущий div, и время, когда он уже находится в 0, когда он должен.) Обратите особое внимание на то, что Значения положения отображаются в правом конце текста, когда вы нажимаете СТРЕЛКУ ВПРАВО.

Теперь нажмите кнопку «click to add text», чтобы добавить строку «hello», и позвольте коду переместить курсор в правую часть текста. Затем нажмите СТРЕЛКУ ВПРАВО и обратите внимание, что позиция курсора говорит, что курсор находится в позиции 1 (при нажатии клавиши вверх и вверх).

Это означает, что в данный момент я не могу определить, что курсор находится на правой стороне текста. (Таким образом, курсор не может быть немедленно перемещен обратно к следующему элементу div, как обычно, если бы он находился в этой позиции.) После того, как пользователь использует клавишу СТРЕЛКА ВЛЕВО для перемещения на один символ влево, затем перемещается назад с помощью клавиши СТРЕЛКА ВПРАВО, положение курсора исправляется.

Итак, вопрос в том, существует ли способ обеспечить обновление значения положения курсора в соответствии с фактическим положением курсора? Или я что-то еще здесь делаю, что нецелесообразно?

...