Привет 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: Представители банков – обратите внимание, ибо вас в этом “списке” достаточно.
