Атрибут inputmode тега <textarea>

Описание

Атрибут inputmode в теге <textarea> указывает браузеру, какой тип виртуальной клавиатуры показывать на мобильных устройствах при фокусе на поле. Это улучшает пользовательский опыт, особенно на смартфонах и планшетах.

Пример использования:
<textarea inputmode="text"> Стандартная клавиатура для текста </textarea>

Значения атрибута:

Значение Описание Когда использовать
text Стандартная текcтовая клавиатура (по умолчанию) Для обычного текста
numeric Цифровая клавиатура Для числовых кодов, PIN-кодов
decimal Клавиатура с цифрами и десятичной точкой Для дробных чисел
email Клавиатура с @ и .com Для ввода email-адресов
url Клавиатура с / и .com Для ввода URL-адресов
search Клавиатура с кнопкой поиска Для поисковых полей
tel Телефонная клавиатура Для телефонных номеров

Особенности работы:

  • Работает только на мобильных устройствах
  • Не влияет на валидацию ввода
  • Поддерживается большинством современных браузеров
  • Может сочетаться с другими атрибутами (pattern, type)

Примеры для разных сценариев:

<!-- Для ввода кода подтверждения --> <textarea inputmode="numeric" maxlength="6"></textarea> <!-- Для ввода адреса сайта --> <textarea inputmode="url" placeholder="https://example.com"></textarea> <!-- Для ввода телефонного номера --> <textarea inputmode="tel"></textarea>

Рекомендации:

  • Используйте соответствующий inputmode для типа данных
  • Сочетайте с maxlength для числовых полей
  • Тестируйте на реальных мобильных устройствах
  • Не заменяет атрибут type для input элементов

Ограничения:

  • Не работает на десктопных браузерах
  • Поддержка в старых браузерах ограничена
  • Не гарантирует правильный ввод данных
  • Поведение может отличаться на разных платформах

Пример хорошей практики:

<form> <label>Код подтверждения (6 цифр):</label> <textarea inputmode="numeric" pattern="[0-9]{6}" maxlength="6" title="Введите 6 цифр"> </textarea> <label>Ваш email:</label> <textarea inputmode="email"></textarea> </form>

Примечание: Для сложных сценариев ввода:

  • Используйте маски ввода через JavaScript
  • Рассмотрите специализированные библиотеки (inputmask)
  • Для числовых полей лучше использовать <input type="number">