Переместить курсор на элемент-заполнитель в DIV-контенте contentEditable - PullRequest
Новая
       50

Переместить курсор на элемент-заполнитель в DIV-контенте contentEditable

1 голос
/ 16 февраля 2011

У меня есть contentEditable DIV, и когда пользователь нажимает клавишу, базовый код обрабатывается и заменяется обновленным кодом.Увы, это приводит к потере позиции курсора.

Однако, чтобы сохранить позицию курсора, я успешно вставляю <span id="placeholder"></span> в DIV в правильном положении перед началом обработки.Это сохраняет предполагаемую позицию курсора, но теперь я не могу установить диапазон для его выбора.

Вот что у меня сейчас есть: 

function focusOnPlaceholder() {

    var placeholder = document.getElementById('placeholder');

    if( !placeholder ) return;

    var sel, range;

    if (window.getSelection && document.createRange) {                    
        range = document.createRange();
        range.selectNodeContents(placeholder);
        range.collapse(true);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(placeholder);
        range.select();
    }

}

Любая помощь будет оценена, икросс-браузерное решение было бы невероятно:)

1 Ответ

4 голосов
/ 16 февраля 2011

Кросс-браузерным решением было бы использовать мою библиотеку Rangy и, в частности, модуль сохранения / восстановления , который использует похожую технику-заполнитель и хорошо протестирован.Однако это, вероятно, можно исправить без использования библиотеки, поместив некоторый контент (например, неразрывный пробел (\u00A0 или &nbsp; в HTML) внутри элемента-заполнителя. Возможно, вы захотите удалить заполнитель в focusOnPlaceholder() после выбора диапазона.

...