Существует ли приемлемый кроссплатформенный метод отображения цифровой клавиатуры в стандартных веб-формах на сенсорном устройстве?
Цель: Найти кроссплатформенное решение для отображения цифровых клавиатур на мобильных сенсорных устройствах, с минимумом хаков.
Проблема:
У меня есть обычное веб-приложение, использующее формы ввода данных, содержащие в основном числовые данные. Когда пользователь взаимодействует с моим сайтом на мобильном устройстве, я хотел бы отобразить цифровую виртуальную клавиатуру, так как большинство стандартных клавиатур требуют второго нажатия для переключения с альфа-каналов на цифры. Я знаю, что я могу активировать другую клавиатуру, установив атрибут "type" элемента ввода:
type=number:
Это отлично работает под iOS / Safari. Я не уверен в других браузерах на платформе.
На Android это не всегда поднимает правильную клавиатуру в различных браузерах и часто приводит к нежелательным кнопкам лифта на входе. Мне еще предстоит найти чистый способ отключить их в CSS.
type=tel:
Это почти работает на iOS / Safari, но на клавиатуре телефона отсутствует десятичная кнопка.
Похоже, отлично работает в нескольких браузерах Android, без каких-либо посторонних элементов пользовательского интерфейса, добавленных на страницу.
Мое текущее решение является хаковым и упрощенным. Основываясь на классе, который я уже использую для числовой проверки, я заменяю каждый текстовый элемент, который должен содержать число, новым вводом, который является либо числом , либо типом telв зависимости от обнаруженной ОС /браузера.
var isAndroid = navigator.userAgent.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;
if (isAndroid || isIOS) {
var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel
jQuery("input.num").each(function () {
var type = (useNumberType ? "number" : "tel");
var html = this.outerHTML;
html = html.replace(/(type=\"?)text(\"?)/, "$1" + type + "$2");
this.outerHTML = html;
});
}
Я бы предпочел не использовать обнаружение браузера и не менять входные данные на лету во время выполнения. Я мог бы ввести модуль http на стороне сервера, который делал бы в основном то же самое, но это не существенно лучше. Я шокирован тем, что для этого нет призыва CSS.
Есть ли лучший способ получить цифровую клавиатуру с десятичной кнопкой, которая работает на всех или большинстве сенсорных мобильных устройств без добавления странных элементов пользовательского интерфейса на страницу?
-------------- обновление
Я не думаю, что есть способ сделать то, что я действительно хочу сделать, а именно настроить единый стиль или тип ввода, который будет хорошо работать в настольных браузерах и на всех основных мобильных сенсорных платформах. Я остановился на изменении типа ввода с помощью прямого вызова DOM, а не через jQuery, а не переписывания всего ввода через outerHTML. Я подозреваю, что нет большой разницы в эффекте, но код немного чище. Поскольку я не изменяю типы ввода на рабочем столе, мне не нужно беспокоиться об ограничении IE только на чтение атрибута.
В идеале я, вероятно, обработал бы это на стороне сервера, чтобы все отправлялось в браузер в формате, желаемом для устройства, делающего запрос. Но пока новый код выглядит примерно так:
var isAndroid = navigator.userAgent.match(/android/i) || navigator.platform.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;
if (isAndroid || isIOS) {
var useNumberType = (isIOS ? true : false); //iOS uses type=number, everyone else uses type=tel
jQuery("input.num").each(function () {
var type = (useNumberType ? "number" : "tel");
if (this.type == "text") {
this.type = type;
}
});
}