example - wkwebview ios 10




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

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

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

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

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

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

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

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

ОБНОВИТЬ:

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


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

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

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

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


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

HTML:

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

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

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

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

IPAD:


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

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

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

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

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

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


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

<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 имеет числовые символы.

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


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





keyboard