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

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

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

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

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

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

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

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

UPDATE:

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

Ответ 1

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

HTML:

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

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

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

Desktop:

IPad:

Ответ 2

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

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

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

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

Ответ 3

Быстрый поиск в поисковой системе fooobar.com/questions/22725/....

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, вам, вероятно, придется использовать агент пользователя.

fooobar.com/questions/22726/...

Ответ 4

Это сделает цифровую сторону дисплея клавиатуры 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

Ответ 5

Попробуйте следующее:

<input type="text" name="postalcode" class="js-postal">
<script src="https://code.jquery.com/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  if('ontouchstart' in window) { // ensure we are in touch device.

    $('input.js-postal').on('focus', function() {
      var $this = $(this);

      // memorize current value because...
      var val = $this.val(); 
      // this may cause reset value.
      $this.attr('type', 'number'); 

      setTimeout(function() {
        // Asynchronously restore 'type' and value
        $this.attr('type', 'text');
        $this.val(val);
      }, 0);
    });
  }
});
</script>

Я знаю, что это очень хакерский путь, но это, по-видимому, работает. Однако я не тестировал на устройствах Android.

Обратите внимание, что это может вызвать небольшие заметные сбои, если $this.attr('type', 'number'), потому что это reset значение, когда input имеет не численные символы.

Основные идеи украдены из этого ответа:)

Ответ 6

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

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

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

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

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

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

Ответ 7

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