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

Question

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

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

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

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

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

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

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

ОБНОВИТЬ:

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

Answer 1

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

HTML:

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

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

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

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

IPAD:

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

Answer 6

Вы можете использовать собственный атрибут HTML API с именем inputmode="numeric", inputmode="decimal". (Это предпочтительный способ реализации) Подробнее о режиме ввода можно прочитать на MDN здесь .

Answer 7

Попробуй это:

<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') потому что это сбросить значение при input имеет не числовые символы.

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

Answer 8

<input type="tel" inputmode="decimal">

Выше работает для меня в течение нескольких лет. Под работой я подразумеваю, что на мобильных устройствах отображается цифровая виртуальная клавиатура, когдаinputполучает фокус. На устройствах iOS клавиатура позволяет пользователям вводить числа, десятичные дроби и символы. Мой обработчик событий клавиатуры вставляет разделители тысяч, и нет проблем с прохождением проверки, поэтому я предполагаю, что пользователи также могут вводить запятые. Можно вводить отрицательные значения, поэтому разрешены дефисы, хотя я не вижу дефиса на клавиатуре iOS.

Если вы хотите попробовать это, вы можете попробовать любой калькулятор на моем сайте.

Answer 9

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