Установка курсора в конец строки в input с JavaScript

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию

В конце подарим скидку до 55% на обучение

Я предпочитаю

Работать самостоятельно и не зависеть от других

Работать в команде и рассчитывать на помощь коллег

Организовывать и контролировать процесс работы

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

Для того чтобы автоматически установить фокус в поле ввода, применяется атрибут autofocus:

HTML

Скопировать код

<input type="text" autofocus>

Альтернативным вариантом будет вызов метода .focus() на JavaScript после полной загрузки страницы:

Скопировать код

window.onload = () => document.getElementById('myInput').focus();

Не забывайте, что вам потребуется присвоить id данному полю ввода предварительно, таким образом: id="myInput":

HTML

Скопировать код

<input type="text" id="myInput">

Полноценное и логичное взаимодействие пользователя с интерфейсом обеспечивается, в том числе, функцией правильной фокусировки элементов. В этой статье мы рассмотрим, как установить фокус в поле ввода сразу после загрузки страницы.

Дополнительная информация

Проверка поддержки autofocus

Атрибут autofocus, введенный в HTML5, может подкинуть неожиданные проблемы в силу особенностей работы в разных браузерах. Поэтому нередко уместным становится тестирование возможностей браузера:

Скопировать код

if ('autofocus' in document.createElement('input')) {
  console.log('Поддержка autofocus присутствует');
} else {
  // В случае, если с HTML5 есть затруднения
  window.onload = () => document.getElementById('fallbackInput').focus();
}

Опять же, не забывайте о нужности присваивания id элементу, который станет вашим "запасным" фокусом:

HTML

Скопировать код

<input type="text" id="fallbackInput">

Контроль позиции курсора

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

Скопировать код

// Управление положением курсора
const input = document.getElementById('myInput'); 
input.focus();
input.setSelectionRange(input.value.length, input.value.length);

Если вам важно сохранять текущий текст при установке фокуса, можно сделать так:

Скопировать код

// Тонкая настройка: "Смотреть можно, трогать — нет!"
input.addEventListener('focus', function() {
  this.value = this.value;
});

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

Если ваш сценарий работы с прокручиваемыми текстовыми полями, то свойство scrollTop применяется для начала прокрутки снизу:

Скопировать код

// Как говорится, "одобрено Дрейком"
textarea.scrollTop = textarea.scrollHeight;

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

Принимая во внимание индивидуальные характеристики браузеров, использование window.onload гарантирует установку фокуса на поле ввода после завершения загрузки страницы:

Скопировать код

// Сфокусируем все взгляды на нас!
window.onload = () => document.getElementById('universalInput').focus();

Полифиллы для гарантированной совместимости

В некоторых ситуациях браузеры упорно не "замечают" autofocus и другие функции HTML5. Здесь крупный план захватывают полифиллы:

Скопировать код

// В смутные времена полифиллы – наша верная поддержка
if (!('autofocus' in document.createElement('input'))) {
  // Здесь будет ваш код полифилла, для корректировки поведения...
}

Придаем важность проблеме доступности

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

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

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

Среди остальных актеров этой грандиозной сцены, только один привлекает взгляды и эффективно провоцирует к действию.

HTML

Скопировать код

<body onload="document.getElementById('star').focus();">
    <input id="not-star" type="text" placeholder="🔘">
    <input id="star" type="text" placeholder="🌟🔦" autofocus> <!-- Наш главный герой -->
    <input id="not-star" type="text" placeholder="🔘">
</body>

После загрузки страницы вы увидите следующую картину:

Markdown

Скопировать код

🔘  🌟🔦  🔘

Итогом станет: Поле ввода с 🌟🔦 мгновенно оказывается в центре внимания, словно звезда, выходящая на сцену под свет прожектора в момент поднятия занавеса.

Особые рекомендации

Фокус внутри форм

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

Скопировать код

// Реализация данного механизма напоминает вежливую очередь в магазине за пончиками
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const inputs = Array.from(document.querySelectorAll('form input[type="text"]'));
  const nextInputIndex = inputs.indexOf(e.target) + 1;
  if (inputs[nextInputIndex]) {
    inputs[nextInputIndex].focus();
  }
});

Динамическая загрузка контента

В случае с контентом, генерируемом динамически, или в Одностраничных Приложениях (SPA) целесообразно используется MutationObserver или соответствующие методы жизненного цикла фреймворков для контроля фокуса:

Скопировать код

// Можно сравнить это с поиском друга в людной толпе
const observer = new MutationObserver((mutations, obs) => {
  const input = document.getElementById('dynamicInput');
  if (input) {
    input.focus();
    obs.disconnect(); // Заканчиваем наблюдение, как только цель обнаружена
  }
});
observer.observe(document, { childList: true, subtree: true });

Модальные окна и управление фокусом

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

Скопировать код

// Похоже на задачу удержания активного щенка в ограде
function trapFocus(element) {
  const focusableEls = element.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select');
  const firstFocusableEl = focusableEls[0];
  const lastFocusableEl = focusableEls[focusableEls.length – 1];

  element.addEventListener('keydown', function(e) {
    if (e.key === 'Tab' || e.keyCode === 9) {
      if (e.shiftKey) {
        if (document.activeElement === firstFocusableEl) {
          lastFocusableEl.focus();
          e.preventDefault();
        }
      } else {
        if (document.activeElement === lastFocusableEl) {
          firstFocusableEl.focus();
          e.preventDefault();
        }
      }
    }
  });
}

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

autofocus – HTML: HyperText Markup Language | MDN — Подробная информация о autofocus и наилучших практиках применения этого атрибута с MDN.
HTML input autofocus Attribute — Компактное руководство по применению autofocus в HTML, предложенное на сайте W3Schools.
Focusing on Focus Styles | CSS-Tricks — Обсуждение настройки стилей фокуса и улучшение доступности элементов.
Focusing: focus/blur — удобное руководство по управлению состоянием фокусировки с помощью JavaScript.
Jquery UI Slider change value of slider when changed in input field – Stack Overflow — Обсуждение согласованной работы слайдера и текстового поля, являющееся примером использования методов установки фокуса.
focus event | jQuery API Documentation — Описание метода .focus() jQuery, являющегося надежным инструментом для упрощения установки фокуса через JavaScript.
HTML Standard — Официальный стандарт HTML, где вы найдете всё необходимое о элементе <input>.
WebAIM: Keyboard Accessibility — Информация о индикаторах фокуса и руководство по доступности управления с клавиатуры.