JavaScript: перемещение курсора в конец текста input

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

Для перемещения курсора в конец текстового поля придётся воспользоваться методом setSelectionRange элемента после его фокусировки:

function placeCursorAtEnd(el) {
  let length = el.value.length;
  el.focus();
  el.setSelectionRange(length, length);
}

// Применяем функцию к элементу ввода:
placeCursorAtEnd(document.getElementById('yourTextInputId'));

Функция placeCursorAtEnd помогает быстро перенести курсор в конец текста в поле ввода DOM-элемента.

Все браузеры на все сто

Отметим, что не все браузеры поступают одинаково, кто-то из них неправильно обрабатывает фокусировку, что иногда приводит к непредсказуемым эффектам с курсором. Для того чтобы контролировать положение курсора, можно использовать setTimeout с нулевым интервалом, что дает возможность ожидать «очистки» очереди событий перед выполнением setSelectionRange.

function placeCursorAtEnd(el) {
  let length = el.value.length;
  el.focus();
  setTimeout(() => {
    el.setSelectionRange(length, length);
  }, 0);
}

Старые браузеры не бывают плохими

В частности, это требуется для работы с Internet Explorer. Если вы столкнулись с необходимостью поддержки этого или других устаревших браузеров, вам следует воспользоваться функцией createTextRange для управления положением курсора.

function placeCursorAtEnd(el) {
  let length = el.value.length;
  el.focus();
  if (el.createTextRange) {
    var range = el.createTextRange();
    range.collapse(true);
    range.moveEnd('character', length);
    range.moveStart('character', length);
    range.select();
  } else if (el.setSelectionRange) {
    setTimeout(() => {
      el.setSelectionRange(length, length);
    }, 0);
  }
}

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

Управление прокруткой в текстовых областях

Если текстовое поле поддерживает прокрутку, важно скорректировать свойство scrollTop, чтобы при перемещении курсора в конец текстовое поле автоматически проматывалось до нижнего края.

function placeCursorAtEnd(el) {
  let length = el.value.length;
  el.focus();
  el.scrollTop = el.scrollHeight;
  setTimeout(() => {
    el.setSelectionRange(length, length);
  }, 0);
}

Неожиданности в Chrome и Safari

В Chrome и Safari событие focus может вести себя нестандартно, поэтому в этих браузерах лучше использовать событие mouseup.

document.getElementById('yourTextInputId').addEventListener('mouseup', function() {
  this.selectionStart = this.selectionEnd = this.value.length;
});

jQuery-изящность

Если вы предпочитаете jQuery, то код можно упростить до следующего вида:

$('#yourTextInputId').mouseup(function() {
  $(this).focus();
  const length = $(this).val().length;
  $(this).setSelectionRange(length, length);
});

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

Вообразим текстовое поле как поезд 🚂, а курсор – как рельсы 🛤️, по которым он движется.

Сначала: |🚂🚃🚃🚃|🛤️|
Потом:  |🚂🚃🚃🚃🛤️|

Цель задачи – перенести курсор в конец текстового поля.

// JavaScript приходит на помощь!
inputElement.focus(); // "Полный вперёд!"
inputElement.value = inputElement.value; // Курсор в конце

Таким образом, мы достигаем поставленной цели, перемещая курсор в конец, не меняя при этом текст в поле ввода.

Продвинутые сценарии использования и рассуждения на эту тему

Взаимодействие с динамическим контентом

Когда вам приходится работать с динамическим контентом, например, данными, полученными через AJAX, или в модальных окнах, потребуется выставлять фокус только после загрузки всего содержимого.

// Пример фокусировки с помощью jQuery после отображения модального окна
$('#myModal').on('shown.bs.modal', function() {
  placeCursorAtEnd($('#dynamicInputId').get(0));
});

Удобство пользователя в приоритете

Для обеспечения наилучшего впечатления от работы с формами, перемещайте курсор в конец поля ввода при его активации. Это особенно актуально в случае одностраничных приложений, где элементы формы зачастую остаются между переключениями страниц.

Переиспользование кода

Следите за тем, чтобы код, который вы написали, мог быть переиспользован в различных частях вашего проекта. В фреймворках таких как Angular или React создавайте директивы или компоненты, которые включают описанную функциональность для повторного использования.

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

1. HTMLInputElement: метод setSelectionRange() – Web APIs | MDN — Подробности о методе setSelectionRange.
2. Используйте JavaScript для установки курсора в конец текста в текстовом элементе – Stack Overflow — Обсуждение различных подходов к управлению положением курсора на Stack Overflow.
3. HTMLElement: метод focus() – Web APIs | MDN — Более подробная информация о методе focus.
4. Переместить курсор в конец поля ввода | CSS-Tricks – CSS-Tricks — Дополнительные советы и рекомендации по работе с курсором.
5. Фокусирование: focus/blur — Теория и практика работы с событиями фокусировки и потери фокуса, включая обсуждение вопроса управления положением курсора.