1. Дальнейшее чтение на SmashingMag:
2. Выявление проблемы
3. Zip It Up
4. Отправить в хаки

Смиренная форма ввода. Он был частью HTML до тех пор, пока у HTML была формальная спецификация; но прежде HTML5 Разработчики были поражены его ограниченными типами и атрибутами. Однако по мере того, как использование смартфонов и их экранных клавиатур процветало, входные данные взяли на себя новую и невероятно важную роль - но они также изобилуют несоответствиями браузеров и устройств. Восемь оригинальных типов ввода были блестящими в своей простоте. (Хорошо, хорошо, может быть, <input type = "image"> не очень хорошо состарился.) Подумайте об этом: вставив один элемент в разметку, вы можете указать любому веб-браузеру: оказывать элемент управления взаимодействием, и вы можете полностью изменить это взаимодействие - от текстового поля до флажка или переключателя - просто изменив ключевое слово. А теперь представьте мир, в котором создание этих взаимодействий означает также создание пользовательских элементов управления взаимодействием, и вы начинаете понимать, как на самом деле воспринимаются входные данные.

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

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

Дальнейшее чтение на SmashingMag:

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

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

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

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

Выявление проблемы

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

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

Собственные средства выбора даты отображаются при использовании типа ввода даты в Chrome для iOS и Mac ( Посмотреть большую версию )

Однако, как и в Firefox 36 и Internet Explorer (IE) 11, тот же тип ввода по умолчанию используется как обычное текстовое поле, что заставляет разработчиков использовать polyfills или вместо этого продолжать создавать решения для выбора даты на основе JavaScript.

В качестве типа ввода даты по умолчанию используется текстовое поле в Firefox 36. ( Посмотреть большую версию )

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

Firefox поддерживает тип ввода диапазона начиная с версии 23. ( Посмотреть большую версию )

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

Реализация типа ввода диапазона в IE 10+ показывает инкрементальное деление и его текущее числовое значение при перетаскивании мышью. ( Посмотреть большую версию )

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

• тип . Отражает ли тип ввода вводимые данные (для целей семантики и проверки) и также запускает правильную клавиатуру в Android?
• шаблон проверки . Ваш шаблон позволяет вводить правильные символы, и это также вызывает правильную клавиатуру в iOS?
• Атрибут шага В некоторых браузерах, позволяют ли маленькие стрелки вверх и вниз, связанные с вводом чисел, увеличивать или уменьшать их ввод в правильных шагах?
• обязательный атрибут Если требуется ввод, все ли значения его типа, шаблона и шага соответствуют ожидаемому формату, и верно ли это для всех браузеров на мобильных устройствах и компьютерах?

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

Пользователям Android отображается соответствующая клавиатура для типа ввода номера. ( Посмотреть большую версию )

В iOS ваша клавиатура будет улучшена (в верхнем ряду будут отображаться цифры):

В iOS клавиатура, отображаемая в ответ на тип ввода номера, содержит цифровые клавиши. ( Посмотреть большую версию )

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

<input type = "number" pattern = "[0-9] *" обязательно>

В iOS эта комбинация дает нам это:

Установка атрибута шаблона в [0-9] * побуждает iOS отображать цифровую клавиатуру. ( Посмотреть большую версию )

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

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

Символы, которые не соответствуют указанному шаблону, будут вызывать ошибки в настольных браузерах, где невозможно управлять клавиатурой. ( Посмотреть большую версию )

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

Zip It Up

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

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

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

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

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

Пользователям Android может не повезти, но можем ли мы улучшить их для iOS? Если вы хотите проверить поле, ответ опять будет «нет», что в значительной степени вызвано решением Apple основывать свою расширенную клавиатуру на одном жестко закодированном шаблоне проверки. Если мы хотим использовать <input type = «text» pattern = »[0-9] *»> (жестко закодированный шаблон, который запускает 10-клавишную клавиатуру iOS), наши пользователи не смогут вводить специальные символы или буквы. Даже если вы игнорируете пользователей из других стран и используете шаблон, который допускает использование расширенных почтовых индексов, например <input type = «text» pattern = «(\ d {5} ([-] \ d {4})?)» > вы все равно не вернете этот расширенный интерфейс iOS, который принесет пользу пользователям.

В этих примерах валют и почтовых индексов также не учитывается поддержка других атрибутов, которые могут быть добавлены при вводе формы, таких как автокапитализация, автозаполнение и автозамена. Автокапитализация и автозамена - это функции, созданные Apple, которые работают в iOS и Safari, но официально не являются частью спецификации HTML и не пройдут проверку W3C. Автозаполнение, с другой стороны, является частью официальной спецификации, но с версии 34, Chrome игнорирует и переопределяет этот атрибут по умолчанию поддерживать встроенную функцию автозаполнения формы.

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

Отправить в хаки

Как с большинством проблем стандартов, есть обходные пути, и есть проблемы с обходными путями. Тот, который я чаще всего рекомендовал для работы с цифрами и валютой, - это использование <input type = “tel”>, которое создает наиболее близкую вещь, которую мы имеем к кроссплатформенному 10-клавишному клавиатурному решению:

При установке типа входа на телефон будет отображаться 10-клавишная клавиатура на iOS и Android. ( Посмотреть большую версию )

Это дает 10-клавишную клавиатуру на Android и iOS, не применяя шаблон на рабочем столе. Но, как вы можете видеть по второму экрану этой клавиатуры, это также явно не лучшая практика:

К сожалению, дополнительная клавиатура типа ввода tel зависит от телефона. ( Посмотреть большую версию )

Действительно ли мы хотим предоставить пользователям телефонную клавиатуру с клавишами «пауза» и «ожидание», когда они на самом деле не вводят номер телефона? А что будет с нашими сайтами, если мобильные платформы и браузеры изменят способ обработки телефонных входов?

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

Оба эти решения относятся ко времени использования звезда и подчеркивание CSS хаков чтобы избежать странного поведения в старых браузерах (особенно IE 6) - и мы не должны идти туда снова. Эти хаки являются сознательным решением обойти стандарты и лучшие практики для выполнения поставленной задачи, не задумываясь о том, что произойдет с нашей кодовой базой по мере развития поддержки браузеров и развития функций.

Другое решение может быть на горизонте в форме предложенной WHATWG атрибут входного режима , Используя этот атрибут, разработчики могли бы объявить определенное состояние, которое подсказывает, какой механизм ввода будет наиболее полезным, с предопределенным резервным состоянием. Например, <input inputmode = «tel»> вернется к числовому состоянию, если клавиатура устройства не поддерживает телефонный ввод, а <input inputmode = «numeric»> отобразит цифровую клавиатуру, но также допустит отрицательные числа и разделитель тысяч. К сожалению, поддержка этого предложенного атрибута все еще крайне ограничен и так же, как типы ввода и шаблоны, нам придется подождать и посмотреть, будет ли он реализован последовательно во всех браузерах и устройствах.

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

Если вы используете эти новомодные типы и шаблоны ввода, то тестируйте, тестируйте и тестируйте снова на любом количестве устройств. я создал Тип входа Песочница утилита для опробования различных комбинаций типов, шаблонов и атрибутов именно для этой цели.

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

Настоящая проблема здесь не имеет ничего общего с замечательными новыми возможностями, которые вводят в HTML5 нам разработчики; проблема в поддержке и реализации.

Единственное верное решение - для всех производителей браузеров и устройств работать с одной и той же книгой. В частности, нам нужно потребовать следующее:

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

Отслеживать планы каждого производителя браузера и устройства для поддержки этого набора типов и шаблонов довольно сложно, хотя мы можем получить некоторую информацию с их сайтов отслеживания ошибок и поддержки. Например, Microsoft говорит, что <input type = «date»> будет поддерживаться в его предстоящем спартанском браузере. Это оставляет Firefox как одинокого противника, несмотря на Билет Bugzilla Это было открыто с 2012 года. Я не могу найти никакого официального комментария о том, планирует ли Mozilla добавить поддержку в ближайшее время.

Я также не смог найти никакой информации о плане Apple по улучшению или изменению своих клавиатурных вводов для iOS, хотя это « Текстовое руководство по программированию для iOS ”По-прежнему рекомендует (как мне кажется, неточно) использовать свой пресловутый жестко закодированный шаблон <[0-9] *> для почтовых индексов.

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

Похожие

Комментарии