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

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

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

введите описание изображения здесьвведите описание изображения здесь

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

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

введите описание изображения здесь

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

введите описание изображения здесь

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

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

ОБНОВИТЬ:

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

6 Solutions collect form web for “iPhone / iOS: презентация клавиатуры HTML 5 для почтовых кодов”

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

HTML:

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

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

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

введите описание изображения здесь

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

введите описание изображения здесь

IPAD:

введите описание изображения здесь

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

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

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

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

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

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

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

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

введите описание изображения здесь

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

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

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

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

  • Анимация маскированного UIView, CALayer
  • MvvmCross: GestureRecognized привязка к действию ViewModel
  • ios: Проектирование корзины покупок в приложении для iPhone
  • Проблема интеграции Crashlytics
  • Определить @property в протоколе
  • Когда SLComposeViewController загружается, он поворачивается к ориентации устройства, даже когда я установил основной UIViewController в Portrait
  • Как узнать, какой профиль использовался для создания * .ipa файла?
  • Сбой компиляции Xcode 5
  • Как программно «следить» за каналом Twitter в приложении iOS?
  • Проблема с передней лицевой камерой в IPhone 5S IOS 7
  • как найти аудиоустройства Bluetooth в iOS
  • Interesting Posts

    Какие типы аудиофайлов (например, mp3, ogg) поддерживаются веб-приложениями Mobile Safari и HTML5 iOS?

    Объясните, почему NSURL выбрасывает ошибки на ноль

    Почему масштаб, отображающий размер экрана, неверен в iOS для моего iPad Mini?

    Swift – тип возврата, использующий протокол

    Создание динамической библиотеки iOS 6.1 и ссылка

    Извлечение UIImage из строки NSAttributed

    iOS Swift: как проверить, существует ли объект в массиве, поэтому я не добавляю его в него или не создаю с ним GMSMarker?

    Как переносить текст в UITableViewCell без специальной ячейки

    Добавить запущенный таймер отображения счета в приложение iOS, например, секундомер Clock?

    Как заставить мое представление, которое манипулирует UIPushBehavior, не вращается так сильно? Это абсурдная сумма

    UILocalNotification устарела в iOS10

    Звук AVAudioPlayer не воспроизводится

    Как использовать кнопку Stop в центре управления iOS вместо кнопки паузы с быстрым

    Расширение iOS подвешено при запуске / Extension не инициализировалось вовремя

    iOS завивает анимацию, чтобы удалить uiimageview

    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.