Привет Habr!

Не так давно застал себя врасплох, когда заполнял очередную web-форму, на которой надо было вводить код SMS руками посимвольно! Мелочь, но раздражает. Особенно, когда понимаешь, что современные обозреватели сами проделают всю работу – просто удели немного времени и пользователи не будут испытывать не нужный негатив.

Почему до сих пор хватает ресурсов на просторах рунета, где подобные вещи надо исполнять не в один “tap”? (речь про мобильные сайты)

Свято верю в то, что наш коллективный разум найдет-таки возможность достучаться до тех, кто еще не встал на путь истинный по данному вопросу. Возможно, это ваш сосед по лестничной клетке, или коллега из соседнего департамента, который заведует web-формой, которой пора уже выйти на “новый уровень” ?. Я и у себя в “хозяйстве” нашел подобное. Чего греха таить? – исправляемся.

Давайте по классике - лучше один раз увидеть. На скринах ниже показал несколько наглядных примеров из жизни о том, как браузеры могут отобразить на экранной клавиатуре код из SMS – нажми на него один раз и о чудо, весь код оказывается в нужном месте в нужное время. Уровень напряга 0%.

Пример появления кода SMS на экранной клавиатуре

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