Решение: клавиатура для input type="number" на iOS

Быстрый ответ

Для вызова цифровой клавиатуры на iOS в элементе <input type="number"> следует использовать атрибут pattern со значением \\d*. Это сигнализирует системе о необходимости отображения клавиатуры для ввода чисел.

Пример кода:

<input type="number" pattern="\\d*">

Очень важно использовать атрибут pattern с регулярным выражением \\d*, которое помогает вызвать нужную клавиатуру на устройствах iOS.

Гарантированный вызов цифровой клавиатуры

Помимо pattern со значением \\d*, полезно включить атрибут inputmode="decimal", подходящий для полей ввода десятичных чисел и обеспечивающий вызов клавиатуры с возможностью ввода дробных чисел.

<input type="number" pattern="\\d*" inputmode="decimal">

Если потребуется ввести телефонные номера или другие сложные числовые форматы, идеальным решением станет input type="tel". Он открывает доступ к цифровой клавиатуре, поддерживаемой большим количеством устройств:

<input type="tel" pattern="\\d*">

Следует учесть совместимость атрибута inputmode с разными версиями iOS, чтобы предотвратить неожиданное поведение. Тестирование на различных версиях iOS рекомендуется проводить регулярно.

Использование JavaScript для валидации данных

После настройки HTML-поля подключите валидацию на стороне клиента с помощью JavaScript. Это обеспечит приём только корректных данных. Обработчики событий,блокирующие ввод символов, отличных от цифр, повышают надёжность работы форм:

// Этот jQuery-хелпер запрещает вводить недопустимые символы.
$('input[type="number"]').on('keypress', function(e) {
    if (e.which < 48 || e.which > 57) {
        e.preventDefault();
        return false;
    }
});

Не забывайте про валидацию на стороне сервера, она должна дополнять клиентскую, чтобы обеспечить защиту от некорректного ввода.

Забота о пользовательском опыте

При настройке полей ввода стоит уделять внимание UX. Учтите, что не всегда для полей с типом "number" уместно проявление цифровой клавиатуры. Например, при вводе адреса или почтового индекса, где допустим ввод букв и символов, лучше использовать соответствующие атрибуты для оптимального отображения клавиатуры:

<input type="text" inputmode="numeric" pattern="\\d*">

Для iPad уделите особое внимание корректному распознаванию клавиш, учитывая богатство клавиатурных раскладок этого устройства.

Как обойти исключения и улучшить UX

Несмотря на преимущества HTML5 и директиву type="number", могут возникнуть сложности при интерпретации чисел с разделителями, такими как запятые или пробелы:

<input type="number" pattern="[\\d, ]*">

В таких случаях UX может стать хуже. Решением проблемы будет использование атрибутов inputmode и pattern для корректной работы. Для надёжного отсеивания ненужных символов используйте jQuery:

// Этот jQuery-пример аккуратно отсеивает нежелательные символы
$('input[type="number"]').on('keypress', function(e) {
    var regex = new RegExp("^[0-9,\\b]+$");
    var key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (!regex.test(key)) {
        e.preventDefault();
        return false;
    }
});

Проявляйте заботу об удобстве и понятности UX, проводите тестирование на различных версиях iOS, особенно когда речь идёт о вводе критически важной информации, такой как платёжные данные или персональные сведения.

Визуализация

Представьте <input type="number"/> в виде двери для цифр:

🚪🔢: Добро пожаловать, цифры! Проходите сюда. (Стандартная цифровая клавиатура)

По умолчанию на iOS эта дверь требует специального приветственного коврика:

🚪🔢: (Коврик отсутствует) Какая маленькая обувь у этих муравьёв? 👞📱

Решение проблемы: поместите под дверь соответствующий коврик (атрибуты pattern и inputmode):

<input type="number" pattern="[0-9]*" inputmode="decimal">

Тогда iOS узнает коврик и...

📱👀: О, это вход для ЦИФР! Вызываю ЦИФРОВУЮ КЛАВИАТУРУ. 🎹🔢

Полезные материалы

1. <input>: Элемент ввода (HTML формы) | MDN – глубоко детализированный справочник по HTML-элементам <input>.
2. HTML Standard – Спецификация HTML для типов ввода number с исчерпывающим описанием.
3. Политика для <video> на iOS | WebKit – Информация о поведении input-элементов на iOS, предоставленная командой WebKit.
4. Цифровая клавиатура для мобильного ввода – Stack Overflow – дискуссия о методах вызова цифровых клавиатур на мобильных устройствах.
5. Документация Apple для разработчиков – Инструкции по настройке клавиатуры на iOS для веб-приложений от Apple.
6. Inputmode атрибут: полная история | CSS-Tricks – детальный обзор inputmode, ключевого атрибута для контроля над мобильными клавиатурами.
7. Can I use... Support tables for HTML5, CSS3, etc – Таблицы совместимости браузеров для HTML5-типов ввода, включая number.