Тема:

inputmode HTML атрибут - тип віртуальної клавіатури

Глобальний атрибут inputmode вказує тип механізму введення, який був би найбільш корисним для користувачів, що вводять вміст, особливо для віртуальних клавіатур.

Атрибут inputmode є перелічуваним атрибутом, який може використовуватися для елементів керування формою, таких як <textarea>, або елементів у межах хоста редагування (наприклад, за допомогою contenteditable). Якщо inputmode не вказано або не підтримується, браузер визначає віртуальну клавіатуру за замовчуванням на основі контекстної інформації, такої як атрибути input type або pattern.

Цей атрибут є підказкою для віртуальної клавіатури і не впливає на валідацію введених даних. Для валідації використовуйте атрибути type, pattern та required.

Синтаксис

HTML
<input type="text" inputmode="numeric">

Значення

Атрибут може приймати наступні значення:

none

Віртуальна клавіатура не повинна відображатися.

text

Віртуальна клавіатура для введення тексту в локалі користувача.

tel

Віртуальна клавіатура для введення телефонних номерів, включаючи цифри, "#" та "*".

url

Віртуальна клавіатура для введення URL-адрес, з клавішами для "/" та ".", а також загальними рядками доменів.

email

Віртуальна клавіатура для введення адрес електронної пошти, з клавішами для "@" та ".".

numeric

Віртуальна клавіатура для введення числових значень, корисна для введення PIN-кодів.

decimal

Віртуальна клавіатура для введення дробових числових значень, включаючи цифрові клавіші та роздільник формату локалі.

search

Віртуальна клавіатура, оптимізована для пошуку.

Приклади використання

Результат
<label for="phone-input">Телефон:</label>
<input type="text" id="phone-input" inputmode="tel"><br><br>

<label for="email-input">Електронна пошта:</label>
<input type="text" id="email-input" inputmode="email"><br><br>

<label for="quantity-input">Кількість:</label>
<input type="text" id="quantity-input" inputmode="numeric"><br><br>

<label for="comment-input">Коментар:</label>
<textarea id="comment-input" inputmode="text"></textarea>

Підтримка браузерів

inputmode

Останнє оновлення: