example iPhone/iOS: презентация клавиатуры HTML 5 для почтовых кодов




wkwebview ios 10 (6)

Браузеры в настоящее время не имеют надлежащего способа представления числовых кодов, таких как почтовые индексы и номера кредитных карт. Лучшим решением является использование type='tel' который даст вам цифровую клавиатуру и возможность добавлять любого персонажа на рабочий стол.

Тип text и pattern='/d' даст вам цифровую клавиатуру, но только на iOS.

Существует предложение HTML5.1 для атрибута с именем inputmode который позволит вам указать клавиатуру независимо от типа. Однако в настоящий момент это не поддерживается ни одним браузером.

Я также рекомендовал бы взглянуть на библиотеку Webshim Webshim, которая имеет метод polyfill для этих типов входов.

Существует несколько трюков для отображения различных клавиатур на мобильных устройствах для входов HTML 5 (т. <input> ).

Например, некоторые из них описаны на веб-сайте Apple, « Настройка клавиатуры для веб-представлений» .

Они отлично подходят для удобства использования, но когда дело доходит до ввода для международных почтовых кодов (в основном числовых, но разрешенных букв), у нас остались некоторые плохие варианты. Большинство людей рекомендуют использовать pattern="\d*" для отображения цифровой клавиатуры, но это не допускает ввода букв.

type="number" ввода type="number" показывает обычную клавиатуру, но перемещается в числовой формат:

Это хорошо работает для устройств iOS, но это заставляет Chrome думать, что вход должен быть числом и даже изменяет поведение входа (приращение вверх / вниз и уменьшение значения).

Есть ли способ получить iOS по умолчанию для числового макета, но все же разрешить буквенно-цифровой ввод?

В принципе, я хочу поведение iOS для type="number" но я хочу, чтобы поле вел себя как обычное текстовое поле в настольных браузерах. Это возможно?

ОБНОВИТЬ:

Обнаруживание пользовательского агента для iOS и использование type="number" ввода типа type="number" не является вариантом. type="number" не предназначен для строковых значений (например, почтовых кодов), и он имеет другие побочные эффекты (например, удаление ведущих нулей, разделителей запятой и т. д.), которые делают его менее идеальным для почтовых кодов.


Это сделает цифровую сторону дисплея клавиатуры ios по умолчанию и поддерживает возможность переключения на алфавитную сторону. Когда тип ввода html изменяется, устройство меняет клавиатуру в соответствии с соответствующим типом.

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'number');
        }
    })
}(jQuery));

<input type="number" id="test1" value="123" />
<input id="test2" type="checkbox" />Change

альтернативная демонстрация: http://jsfiddle.net/davidcondrey/dbg1L0c0/3/embedded/result/

Если вам нужна клавиатура с большим цифровым форматом (стиль телефона), вы можете соответствующим образом отрегулировать код, и он все еще работает:

(function ($) {
    var control = $('#test2');
    var field = $('#test1');

    control.bind('click', function () {
        if (control.is(':checked')) {
            field.attr('type', 'text');
        } else {
            field.attr('type', 'tel');
        }
    })
}(jQuery));

<input type="tel" id="test1" value="a" />
<input id="test2" type="checkbox" />Change


Почему бы не проверить заголовок HTTP-запроса (пользовательский агент) и выполнить цифровую компоновку на устройствах iOS, пока обслуживая алфавитно-цифровое расположение до остальных?


Обновление этого вопроса в iOS 11. Вы можете получить цифровую клавиатуру, просто добавив атрибут pattern="[0-9]*" ( pattern="[0-9]*" ) к любому входу с типом числа.

Следующее работает так, как ожидалось.

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

Это также работает.

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

@davidelrizzo отправил часть ответа, но комментарии от @Miguel Guardo и @turibe дают более полную картину, но их легко пропустить.


Быстрый поиск в Google нашел этот вопрос в .

HTML

<input type="text">

Javascript

$('input[type="text"]').on('touchstart', function() {
   $(this).attr('type', 'number');
});

$('input[type="text"]').on('keydown blur', function() {
   $(this).attr('type', 'text');
});

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

при обнаружении iOS


Будет ли это работать?

HTML:

<input type="tel" pattern="[0-9]*" novalidate>

Это должно дать вам симпатичную цифровую клавиатуру на телефонных браузерах Android / iOS, отключить проверку формы браузера на настольных браузерах, не отображать стрелки-прядильщики, разрешать ведущие нули и разрешать запятые и буквы на настольных браузерах, а также на iPad.

Телефоны Android / iOS:

Рабочий стол:

IPAD:





keyboard