Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

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

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

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

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

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

Реализация

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

Поддержка

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

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

Примеры

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

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

Наш Telegram-канал