Привет Habr!
Не так давно застал себя врасплох, когда заполнял очередную web-форму, на которой надо было вводить код SMS руками посимвольно! Мелочь, но раздражает. Особенно, когда понимаешь, что современные обозреватели сами проделают всю работу – просто удели немного времени и пользователи не будут испытывать не нужный негатив.
Почему до сих пор хватает ресурсов на просторах рунета, где подобные вещи надо исполнять не в один “tap”? (речь про мобильные сайты)
Свято верю в то, что наш коллективный разум найдет-таки возможность достучаться до тех, кто еще не встал на путь истинный по данному вопросу. Возможно, это ваш сосед по лестничной клетке, или коллега из соседнего департамента, который заведует web-формой, которой пора уже выйти на “новый уровень” ?. Я и у себя в “хозяйстве” нашел подобное. Чего греха таить? – исправляемся.
Давайте по классике — лучше один раз увидеть. На скринах ниже показал несколько наглядных примеров из жизни о том, как браузеры могут отобразить на экранной клавиатуре код из SMS – нажми на него один раз и о чудо, весь код оказывается в нужном месте в нужное время. Уровень напряга 0%.
Все что нужно – это назвать поле ввода SMS правильно.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>sms test</title> </head> <body> <input type="text" name="sms" /> </body> </html>Да. Это работает – просто значение атрибута name делаем равным “sms” и готово!
Интересно – в какое количество баллов по ICE/RICE оценят эту доработку в продуктовых командах ))
Я не капитан Америка, но камон — реально ресурсов много попадается где отсутствие автокомплита удручает. Надо побороть это недоразумение вместе! Как говорится — кто если не мы ??
Но это еще не все. Если взглянуть в доку к уважаемым “soft генераторам”, то можно обнаружить +1 вариант реализации автозаполнения SMS. И да! Он тоже работает.
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>sms test</title> </head> <body> <input type="text" name="myname" inputmode="numeric" pattern="[0-9]" autocomplete="one-time-code"/> </body> </html>Кстате — ребята из примеров выше были бы просто в топе у педантов, если бы еще и клавиатура была чисто цифровой (inputmode=»numeric»), как у наших героев ниже.
Вот и все – старался коротко и по делу. Надеюсь, что вы уже знаете кому намекнуть на возможность сделать мир web’а лучше.
Если есть, что сказать/дополнить – жду вас в комментариях.
Примеры сайтов без автокомплита тут не стал указывать, так как это будет не культурно с моей стороны. Прошу понять и простить ))
PS: Представители банков – обратите внимание, ибо вас в этом “списке” достаточно.
ссылка на оригинал статьи https://habr.com/ru/articles/773084/
Добавить комментарий