Существует ли приемлемый кроссплатформенный метод для отображения цифровой клавиатуры в стандартных веб-формах на сенсорном устройстве?

Question

Цель: найти кроссплатформенное решение для отображения цифровых клавиатур на мобильных сенсорных устройствах с минимумом взломов.

Проблема:

У меня есть обычное веб-приложение, использующее формы ввода данных, содержащие в основном числовые данные. Когда пользователь взаимодействует с моим сайтом на мобильном устройстве, я хотел бы отобразить цифровую виртуальную клавиатуру, поскольку большинству стандартных клавиатур требуется второе нажатие, чтобы переключиться с альфа-канала на цифры. Я знаю, что могу вызвать другую клавиатуру, установив атрибут "type" элемента input:

type=number: Отлично работает под iOS/Safari. Я не уверен насчет других браузеров на платформе.

В Android это не всегда правильно отображает правильную клавиатуру в различных браузерах и часто приводит к появлению нежелательных кнопок лифта на входе. Я еще не нашел чистый способ отключить их в CSS.

type=tel: Это почти работает на iOS/Safari, но на клавиатуре телефона отсутствует десятичная кнопка.

Кажется, отлично работает во многих браузерах Android без каких-либо посторонних элементов пользовательского интерфейса, добавленных на страницу.

Мое текущее решение является хакерским и упрощенным. Основываясь на классе, который я уже использую для числовой проверки, я заменяю каждый текстовый элемент, который должен содержать число, новым вводом, который либо number или 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, вместо того, чтобы переписывать весь ввод через externalHTML. Я подозреваю, что нет большой разницы в эффекте, но код немного чище. Поскольку я не изменяю типы ввода на рабочем столе, мне не нужно беспокоиться об ограничении 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;
        }
    });
}

Answer 1

Подсказка: при работе с мобильными устройствами НЕ мешайте работе пользователя. Это означает сохранение встроенных клавиатур такими, какие они есть.

Некоторые пользователи могут даже отключить Javascript на своих мобильных устройствах / браузерах!

Что вы должны сделать здесь, это включить HTML-подсказку для браузера. Таким образом, мобильные браузеры должны знать, с каким контентом они взаимодействуют.

HTML5 включает в себя несколько новых <input> типы контента, которые должны поддерживаться на всех современных мобильных устройствах (и в большинстве современных браузеров)

Вы можете найти полный список здесь.

Что конкретно вы хотите, так это:

Старый код:

Phone number: <input type="text" name="phone" />

Новый код:

Phone number: <input type="tel" name="phone" />

Я не знаю, какие браузеры в настоящее время поддерживают "tel", так что вы можете использовать что-то вроде следующего:

Phone number: <input type="number" name="phone" min="1000000000" max="9999999999" />

Это немного взломать, но это еще один вариант для вас.

Это НАМНОГО более простой и более понятный способ ведения дел, и лучше для пользователя.

Пожалуйста, дай мне знать, если возникнут какие-либо вопросы. Я знаю, что это не дает прямого ответа на вопрос, но, на мой взгляд, сейчас это лучший способ сделать что-то.:)

РЕДАКТИРОВАТЬ:

Возможный способ обойти это для каждого браузера - проверка пользовательского агента с помощью JS/Jquery. Я не уверен, как именно это сделать, но вот учебник о том, как это сделать в.NET и изменение CSS для каждого элемента с помощью JQuery.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ!:

Попробуйте просто изменить ваш код как таковой:

var isAndroid = navigator.userAgent.match(/android/i) ? true : false;
var isIOS = navigator.userAgent.match(/(ipod|ipad|iphone)/i) ? true : false;

if(isIOS)
    $(.phoneInput).attr("type", "tel");
if(isAndroid)
{
    $(.phoneInput).attr("type", "number");
    $(.phoneInput).attr("min", "1000000000");
    $(.phoneInput).attr("max", "9999999999");
}

Я надеюсь, что это из всего работает! Возможно, вам придется переключить два if заявления, в зависимости от того, как ваше тестирование получается.