Смирен форма ввода.Это было частью HTML так долго, как HTML имел официальное specification ¹ ;но прежде, чем HTML5, разработчики хромает своих ограниченных типов и атрибутов.Поскольку использование смартфонов и их на экране клавиатур процветала, однако, входы взяли на новом и невероятно важную роль, — но они также пронизана несоответствий браузера и устройства .

Восемь оригинальных типов входных были блестящими в своей простоте.(Ну, хорошо, может быть, <input type="image"> не в возрасте очень хорошо.)

Подумайте об этом: Добавляя один элемент в разметке, можно сказать, любой веб-браузер для визуализации контроль взаимодействия, и вы можете полностью изменить эту взаимодействия – из текстового поля в поле, чтобы кнопка радио – попросто изменив ключевое слово.Теперь представьте себе мир, в котором создание этих взаимодействий означает также создания элементов управления пользовательского взаимодействия, и вы начинаете понимать, как само собой разумеющимся входов на самом деле .

К сожалению, даже Тим Бернерс-Ли и Ко не могли предвидеть напряжение, что мобильные устройства и взаимодействия голодных веб-приложения будет размещать на этих оригинальных концепций пользовательского ввода .

Вот что HTML 5.0 specification ² был предназначен для решения, расширяя понятие ввода текста, чтобы для определенных типов данных, таких как номера и адреса электронной почты, а также богатыйвзаимодействия, такие как конкретных задач на экране клавиатуры и дата-и цветовых палитр.Большинство из них были разработаны с изящной деградации в их ядре, добавив усовершенствования поддерживаемых браузеров, падая обратно красиво основных текстовых входов в старых .

Или, по крайней мере, это было намерение.В реальном мире, многие из этих новых входов и атрибуты — даже, казалось бы, безобидные виды, как <input type="number"> — не всегда ведут себя, как вы могли бы ожидать .

Идентифицирующую Problem

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

Возьмите date.Использование <input type="date"> является находкой для любого переднего плана разработчиком, который когда-либо имел, чтобы добавить JavaScript на основе даты-подборщика на сайт … или, по крайней мере, это было бы, если бы все браузеры поддерживали его.Настольные версии Chrome и большинство мобильных браузеров отображать родной дате-подборщика:

³

Тем не менее, по состоянию на 36 Firefox и Internet Explorer (IE), 11, что же по умолчанию устанавливается тип ввода в простом Ol ‘текстовое поле, заставляя разработчиков использовать polyfills __18 | 5 или продолжить строительство наличиебазирующиеся решения Дата-подборщики, а .

⁶

Отсутствие даты поддержка Вход в Firefox, кажется, не в ладах с общей поддержки поставщика для этих более визуально и функционально развитых типов ввода.Например, range Тип входного (<input type="range">), которая возникла из той же культуры предлагаемых функций, date, была поддержана, поскольку Firefox 23 и IE 10 __43 | 8 .

⁹

На самом деле, внедрение в IE, хотя и не самый визуально привлекательным, имеет некоторые дополнительные утилиты, позволяет увидеть дополнительные подразделения в пределах диапазона, а также его текущее числовое значение на мыши перетащить .

¹¹ Реализация IE 10 ‘ы в range | __7 типа входного показывает дополнительные подразделения и его текущее числовое значение на перетаскивания мышью.( Просмотр большой version ¹² )

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

• TypeТип входного отражают данные, которые вводимой (семантических и проверки целей), и это также вызвать правильный клавиатуры в Android ли
• Проверка patternИмеет ли ваша модель позволит правильных вводить символы, и это также вызвать правильный клавиатуры в ИО
• step attributeВ некоторых браузерах, сделать небольшие стрелки вверх и вниз, связанные с ввода номера позволяют пользователю увеличивать или уменьшать свой вклад в правильных шагов
• required attributeЕсли вход не требуется, сделать его type, pattern 12 ~ и |? Ценит способствуют формате вы ожидали, и это правда во всех браузерах на настольных и мобильных

Представьте себе ситуацию, в которой вам нужно добавить нужное поле ввода для валюты, и вы хотите, чтобы отобразить наилучшие впечатления клавиатуры на всех устройствах.”Простой”, вы думаете, добавив <input type="number" required> в форму.Это прекрасно работает для Android:

¹³

В прошивкой, вашКлавиатура будет улучшена (верхний ряд покажет число):

¹⁵

Но это еще не фантазии 10-клавишная клавиатура Android, дает тебе.Для достижения нечто подобное в IOS, необходимо установить pattern атрибут со значением [0-9]*:

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

В прошивкой, эта комбинация дает нам это:

¹⁷

Я считаю, что эта реализация будет принципиально недальновидно решение о части Apple.Он не только игнорировать тип входного в целом, это также на основе шаблона, который жестко закодированы в ОС, которая означает, что если вы измените эту схему в любом случае, вы потеряете повышение клавиатуры полностью в прошивкой .

В нашем примере валютной, это создает проблемы, но не там, где вы могли бы ожидать.Требуется вход с number типа и pattern из [0-9]* даст нам большие результаты по подвижной, но это легко забыть, что эти решения также влияют на настольных браузеров.На рабочем столе, мы не можем контролировать клавиатуру пользователя, и если они входят в специальный символ (например, запятыми или знак доллара, которые оба правдоподобно для валюты), и тип и модель будет привести к его неисправности на стороне клиентапроверка.(В старых версиях Chrome, десятичных также вызвать ошибки проверки, хотя при добавлении step="any" решает этот вопрос.) Вы можете увидеть здесь проблемы:

¹⁹

Это оставляет разработчиков в немного в беде.Мы можем выбрать, чтобы повысить один опыт мобильной ОС за счет другой, повысить оба наших мобильных опытом на счет столе, или повысить свой опыт рабочего стола на счет мобильного телефона.И ни один из этих вариантов не делают наши заинтересованные стороны очень рад .

Почтовые It Up

Хотя валюта является одним из наиболее показательных примеров, практически любой вход, который необходим для обеспечения буквенно-цифрового содержимого со специальными символами могут вызвать некоторые из изжоги, которая идет с использованием этих новых типов ввода и узоры.Это включает в себя номера социального страхования, номера телефонов или любой номер, может быть введен в неизвестном формате, например, номер банковского счета.Для следующего примера давайте рассмотрим один, который часто упускается из виду: США Почтовые индексы .

Не давая им много думал, ZIP коды, кажется, относительно проста: большинство людей сразу же думать о них, как пять цифр.Таким образом, мы можем просто использовать <input type="number">, верно?Неправильно, по двум причинам .

Более очевидной причиной является расширенный формат ZIP США код (т.е. 12345-6789).Хотя это может быть реже, что позволяет нашим пользователям вводить это таким образом, по-прежнему важно.И мы также должны держать пользователей неамериканских в виду, потому что несколько стран (включая Канаду и Великобританию) используют буквы и другие специальные символы в их почтовых форматов кодов.Семантически Почтовые индексы не цифры: Они числовые коды — Вы никогда не относятся к 90-ых некоторые подростковой телевизионной драме, как

«Беверли-Хиллз девяносто тысяч двести десять.”

Вторая причина немного тоньше: некоторые почтовые индексы на Дальнем Востоке побережье США начинаются с нуля .

Если вы проверки этих полей, специальные символы будут немедленно вызвать проблему проверки, и во многих браузерах (в том числе старых версий Chrome), так что будет нулем.Это означает, что не в состоянии использовать number тип входного и, следовательно, нет расширенной клавиатуры для Android .

Пользователи Android могут быть не повезло, но мы можем все еще повысить для прошивкой?Если вы не хотите, чтобы проверить поле, ответ снова отрицательный, вызвало в значительной степени решения от Apple, чтобы основывать свою повышенную клавиатуры на одном жестко шаблон проверки.Если мы хотим, чтобы использовать <input type="text" patter ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров



Главная → Программирование → 05.05.2015 by coding.smashingmagazine.com