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, пока обслуживая алфавитно-цифровое расположение до остальных?

  • Метод делегата alertViewShouldEnableFirstOtherButton не вызывается
  • Xcode 4 и jailbroken iPhone
  • Размер рекурсивной папки iOS
  • UIImage в UIScrollview
  • Поддержка ориентации Xcode для поддержки определенных видов
  • Settings.bundle & keychain для приложений от Cydia не работает
  • Создание кнопки со стрелкой влево (например, стиль «назад» UINavigationBar) на UIToolbar
  • Objective-C Runtime: Swizzled имя метода?
  • Обнаружение столкновения пикселов / перекрытие между двумя изображениями
  • Facebook iOS SDK - Странные эффекты при записи на статус
  • «CGBitmapContextCreate: недопустимые байты данных / строка» ... почему фильтрация камеры + испортила мою процедуру обрезки изображения?
  • Interesting Posts

    Как обрезать UIImageView в пользовательскую форму

    UIWebView loadRequest: постоянно сбой в NSURLErrorTimedout в iOS 6

    Как работает автоматическое свойство, синтезируемое в xcode 4.4?

    Игровая площадка Xcode не выполняет функции

    Модальный переход не происходит

    Захват экрана для iOS

    Xcode раздувает размер PNG и игнорирует сжатие PNG = флаг NO?

    Как быстро обновлять пользовательский интерфейс из метода

    Сервер Mac OS X Build Отсутствует файл с архивированным расширенным расширением .xcent в IPA

    NSCoding с вложенными пользовательскими объектами?

    iOS MapView: добавьте аннотацию к крану, но не если существующая аннотация нажата

    Почему мой аудио AVCaptureConnection неактивен для форматов с высоким разрешением?

    UIActivityViewController удаляет избыточное пространство при совместном использовании сообщений

    Прокрутите представление таблицы до текстового поля с переполнением, когда клавиатура загорается текстовым полем внутри всплывающего окна

    Сохранены ли циклы сохранения NSManagedObject?

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