Позиционирование курсора в конце текста: contenteditable

Быстрый ответ

Если вам требуется немедленно переместить курсор в конец элемента с атрибутом contenteditable, воспользуйтесь следующим кодом:

function поместитьКурсорВКонец(el) {
  el.focus();
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();
};

поместитьКурсорВКонец(document.querySelector('[contenteditable]'));

Этот код позволяет буквально мгновенно перенести курсор в конец содержимого элемента.

Практика установки курсора в ContentEditable

Учет особенностей разных браузеров

При работе с позицией курсора важно учитывать разницу в поведении браузеров. В частности, при вставке новых строк посредством нажатия клавиши 'Enter' позиция курсора может меняться. Поэтому протестируйте свое решение в крупнейших браузерах, таких как Chrome, Firefox, Safari, а также в Internet Explorer.

Подробнее об этом расскажет наш спикер на видео

Использование метода 'focus'

Помните, что перед манипуляциями с курсором необходимо запустить фокусировку на элементе:

element.focus(); // 💡

Современный подход с использованием 'window.getSelection()' и 'document.createRange()'

С помощью этих команд вы сможете манипулировать курсором в современных браузерах:

const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(element); // Выделяем всё содержимое
range.collapse(false); // Перемещаемся к концу
selection.removeAllRanges(); // Очищаем предыдущее выделение
selection.addRange(range); // Применяем новое выделение

Совместимость с Internet Explorer

Для работы с IE подходит метод document.body.createTextRange():

var textRange = document.body.createTextRange();
textRange.moveToElementText(element);
textRange.collapse(false);
textRange.select();

Добавляем кнопку для управления курсором

Кнопка поможет поместить курсор в нужное место:

document.getElementById('btn').addEventListener('click', event => {
  поместитьКурсорВКонец(document.querySelector('[contenteditable]'));
});

Визуализация

Вот только один из многих возможных примеров, как можно разместить курсор в конец текста:

<div contenteditable="true">
  Вот так вот, следуем за поездом:
  |🚃|🚃|🚃|🚃|_|
</div>

Напишем такой код на JavaScript, который бы это продемонстрировал:

function поместитьКурсорВКонец(element) {
    element.focus(); 
    const range = document.createRange();
    range.selectNodeContents(element);
    range.collapse(false);
    const selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
}

Умелое управление курсором при начале и завершении вставки текста

Размещение курсора в начале строки

function поместитьКурсорВНачало(element) {
  element.focus();
  const range = document.createRange();
  range.selectNodeContents(element);
  range.collapse(true); // начинаем вставку текста
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

Улучшение UX для разных браузеров

Следите за тем, чтобы ваш код работал исправно в различных браузерах.

Форматирование новых строк и последующего текста

Продолжая работу, обратите внимание на форматирование строк с <br>, <div>, или <p>, чтобы они выглядели единообразно.

Особенности поведения в разных браузерах

Браузеры могут по-разному работать при вставке, копировании или комбинациях клавиш. Будьте тщательны при тестировании!

Полезные материалы

1. Document: execCommand() метод – Web APIs | MDN — Информация о кроссбраузерных возможностях.
2. Selection – Web APIs | MDN — Методы выборки текста подробно.
3. Как установить позицию курсора в contenteditable элементе (div)? – Stack Overflow — Варианты для позиционирования курсора.
4. Как переместить курсор в конец contenteditable элемента – Stack Overflow — Решение по возвращению курсора на исходную позицию.
5. HTML DOM Input Range Object — Разбор работы с объектом Range.
6. Вставка HTML у курсора в contenteditable div – Stack Overflow — Работа с вставками в редактируемых элементах.