Атрибут inputmode


	79	66	53		21	94


66	79	47	12.2

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

Применяется к текстовым полям (<input>, <textarea>) или к элементам, для которых установлен атрибут contenteditable.

Синтаксис

inputmode="none | text | tel | url | email | numeric | decimal | search"

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

Значение	Описание	Вид виртуальной клавиатуры
none	Виртуальная клавиатура не отображается. Используется в ситуациях, когда ввод данных реализован собственными средствами, к примеру, виртуальная клавиатура добавлена своя.
text	Стандартная клавиатура для ввода текста, в том числе кнопка для переключения языка.
tel	Клавиатура для набора номера телефона. Включает цифры и кнопки для набора `*` и `#`.
url	Клавиатура, оптимизированная для набора адресов сайтов. Отличается добавленными кнопками `.` и `/`.
email	Клавиатура для написания адреса электронной почты. Обычно включает кнопки `.` и `@`.
numeric	Клавиатура для написания чисел, в том числе десятичных и отрицательных. Включает знак `-` и символ разделения целой и дробной части числа (`.` и `,`).
decimal	Клавиатура для ввода цифр от 0 до 9.
search	Клавиатура, оптимизированная для поиска.

Значение по умолчанию

text

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>inputmode</title> </head> <body> <form> <p>Введите пин-код для входа</p> <p><input type="number" autofocus inputmode="decimal"> <button>Войти</button></p> </form> </body> </html>

Результат данного примера показан на рис. 1.

Вид виртуальной клавиатуры при вводе чисел

Рис. 1. Вид виртуальной клавиатуры при вводе чисел

Примечание

В Firefox до версии 95 атрибут inputmode по умолчанию отключен. Для его работы в настройках программы по адресу about:config следует найти параметр dom.forms.inputmode и установить ему значение true (рис. 2).

Настройка параметров в Firefox

Рис. 2. Настройка параметров в Firefox

Спецификация

Спецификация	Статус
HTML Living Standard	Живой стандарт