Webstacker

Твой онлайн-журнал с мира Web и Front End: Новости, статьи и гайды на русском

Как сделать нужную клавиатуру при вводе: все о «inputmode»

  • Вещает
  • Опубликовано:
  • Изменено:
Как сделать нужную клавиатуру при вводе: все о «inputmode»

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

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

Реализация

Проще некуда – просто добавь один из параметров ниже для inputmode внутри <input> или <textarea>. Пройдемся по каждому из них:

  • inputmode="none" – в Chrome для Android фокус на поле вовсе не показывает клавиатуру, а в Safari (iOS) отображает стандартную клавиатуру;
  • inputmode="numeric" – один из самых популярных режимов ввода. Идеально подходит для ввода номеров, пин-кодов, почтовых индексов и тому подобных;

    inputmode="numeric"
    inputmode="numeric"
  • inputmode="tel" – клавиатура, используемая для ввода номера телефона. Также, добавляет автозаполнение номера телефона в iOS;

    inputmode="tel"
    inputmode="tel"
  • inputmode="decimal" – тоже самое, что с tel, но заменяет +*# на точку;

    inputmode="decimal"
    inputmode="decimal"
  • inputmode="email" – добавляет @ и точку в клавиатуру. Особенно удобно в тех полях, где происходит идентификация пользователя. Например, как в Twitter (@username);

    inputmode="email"
    inputmode="email"
  • inputmode="url" – добавляет домен, точку и слэш в клавиатуру. Идеально подходит для ввода ссылок;

    inputmode="url"
    inputmode="url"
  • inputmode="search" – заменяет Enter на Go;

    inputmode="search"
    inputmode="search"

Поддержка

Согласно Can I Use на момент написания статьи поддержка находится на уровне 77%. Все браузеры на базе Chrome для Android и Safari для iOS поддерживают этот атрибут – поэтому его можно смело использовать.

Поддержка inputmode браузерами
Поддержка inputmode браузерами

Примеры

За основу взята статья из CSS Tricks. Спасибо!

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!