/ ↲
    Расширенный поиск

    HTML

    Атрибут inputmode

    Если нужно ввести только цифры зачем показывать всю клавиатуру? Подсказка для браузера какой набор символов нужен.

    Время чтения: меньше 5 мин

    1. Кратко
    2. Пример
    3. Как понять
    4. Как пишется
      1. none
      2. text
      3. numeric
      4. decimal
      5. tel
      6. email
      7. search
      8. url
    5. Подсказки

    Кратко

    Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов <input> или <textarea>.

    Пример

            
          
          <input type="text" inputmode="numeric"><textarea inputmode="text"></textarea>
          <input type="text" inputmode="numeric">

<textarea inputmode="text"></textarea>

    Как понять

    Важно понимать разницу между атрибутом type и атрибутом inputmode:

    • атрибут inputmode только подсказывает браузеру, какой набор символов предложить пользователю для взаимодействия с полем ввода;
    • атрибут type устанавливает тип данных, которые пользователь может ввести в поле ввода.

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

    Как пишется

    none

    Не показывает виртуальную клавиатуру устройства пользователя. Может использоваться для приложения или сайта, которые предлагают свою клавиатуру.

    text

    Используется стандартная клавиатура устройства пользователя. Является значением по умолчанию, учитывает локализацию устройства пользователя.

    Пример клавиатуры для ввода текста

    numeric

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

    Пример клавиатуры для ввода числовых значений

    В сочетании с атрибутами pattern, minlength и maxlength позволяет настроить поле ввода для разных вариантов использования.

    decimal

    Ввод дробных значений чисел с разрядами и разделителем. Для использования символа-разделителя (точка или запятая) учитывается локализация устройства пользователя.

    tel

    Ввод номера телефона на клавиатуре, которая использует числа от 0 до 9, звёздочку * и решётку #.

    Пример клавиатуры для ввода номера телефона

    При использовании этого значения, для поля ввода рекомендуется указывать тип tel:

            
          
          <input type="tel" inputmode="tel">
          <input type="tel" inputmode="tel">

    email

    Клавиатура, оптимизированная для ввода электронной почты. Символы @ и точка . могут располагаться в более удобном месте. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru).

    Пример клавиатуры для ввода электронной почты

    При использовании этого значения, для поля ввода рекомендуется указывать тип email:

            
          
          <input type="email" inputmode="email">
          <input type="email" inputmode="email">

    search

    Используется клавиатура, оптимизированная для работы с поиском:

    • кнопка ввода может быть заменена на «Enter», «Поиск» или «Go»;
    • может добавиться функция голосового ввода;
    • может добавиться кнопка ввода эмодзи или смайлов.

    url

    Используется клавиатура, оптимизированная для ввода ссылок. Может иметь отдельные кнопки для ввода доменов первого уровня (.com, .ru). Символы точки . и косой черты / могут располагаться в более удобных местах.

    Пример клавиатуры для ввода ссылок

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

    Открыть демо в новой вкладке

    Подсказки

    💡 Атрибут inputmode поддерживается современными браузерами. Рекомендуем проверять поддержку на сайте Can I use.

    Читайте также