Атрибут inputmode тега <aside>
Описание
Атрибут inputmode указывает браузеру, какой тип виртуальной клавиатуры показывать при фокусе на редактируемом элементе <aside>. Работает только при наличии contenteditable="true" и в основном на мобильных устройствах.
<aside contenteditable="true" inputmode="text">
<h3>Текстовые заметки</h3>
<p>Введите ваш текст здесь...</p>
</aside>
Доступные значения:
| Значение | Тип клавиатуры | Применение |
|---|---|---|
none |
Без клавиатуры | Для кастомных решений ввода |
text |
Стандартная текстовая | Обычный текст |
decimal |
Цифры с десятичной точкой | Числа, цены |
numeric |
Цифровая | Телефоны, коды |
tel |
Телефонная | Номера телефонов |
search |
Оптимизированная для поиска | Поисковые запросы |
email |
С символами для email | Адреса электронной почты |
url |
С символами для URL | Веб-адреса |
Практические примеры:
<!-- Для числового ввода -->
<aside contenteditable="true" inputmode="decimal">
<h3>Калькулятор</h3>
<p>Введите число: 0.00</p>
</aside>
<!-- Для email -->
<aside contenteditable="true" inputmode="email">
<h3>Подписка</h3>
<p>Ваш email: user@example.com</p>
</aside>
<!-- Для поиска -->
<aside contenteditable="true" inputmode="search">
<h3>Поиск по заметкам</h3>
<p>Введите запрос...</p>
</aside>
Особенности работы:
- Не влияет на валидацию ввода - только на отображение клавиатуры
- Лучше всего работает на мобильных устройствах
- Не изменяет семантику элемента
- Может игнорироваться некоторыми браузерами
Поддержка браузерами:
| Браузер | Поддержка | Примечания |
|---|---|---|
| Chrome (Android) | Да | Полная поддержка |
| Safari (iOS) | Да | Полная поддержка |
| Firefox | Частично | Не все значения |
| Десктопные браузеры | Нет | Не влияет |
Рекомендации:
- Используйте вместе с
contenteditable - Для форм лучше использовать
<input>с соответствующимtype - Тестируйте на реальных мобильных устройствах
- Сочетайте с CSS-классами для визуальных подсказок
Пример с динамическим изменением:
<aside id="smart-input" contenteditable="true">
<h3>Умное поле ввода</h3>
<p>Нажмите для редактирования</p>
</aside>
<script>
const aside = document.getElementById('smart-input');
aside.addEventListener('focus', function() {
if (this.textContent.includes('@')) {
this.inputMode = 'email';
} else if (!isNaN(this.textContent)) {
this.inputMode = 'numeric';
} else {
this.inputMode = 'text';
}
});
</script>
Совет: Для сложных сценариев ввода используйте комбинацию inputmode и JavaScript-валидации, чтобы обеспечить корректный ввод данных.
Доступность:
- Добавляйте текстовые подсказки о типе ожидаемых данных
- Используйте ARIA-атрибуты для скринридеров
- Обеспечьте альтернативные способы ввода для устройств без сенсорного экрана
Пример доступного решения:
<aside
contenteditable="true"
inputmode="tel"
aria-label="Введите номер телефона"
role="textbox"
>
<h3>Контактный телефон</h3>
<p>+7 (___) ___-__-__</p>
</aside>