Постоянный фокус на элементе для ввода кода?

Question

[Алекс]

Приложение сделано на vue. Имеется некая форма авторизации, после заполнения поля с телефонов, улетает смс с кодом. Код необходимо вписать в поле, которое выезжает. Впринципе все реализовано, но осталась неприятная деталь, при выехжании шторки я фокус на инпут кидаю и можно писать код, но есть очень большая вероятность что пользователь может ткнуть просто в любое место на экране и фокус пропадает с инпута, а он у меня скрыт. Как решить данную проблему?

Answer 1

[Рома Зварич]

Как насчет сделать так, чтобы элемент <input> занимал весь блок и клик в любое псевдо-поле всё равно попадал на него <input>?

P.S. Отвратительное юзабилити

https://jsfiddle.net/8adwgxyo/1/

Comments

[Алекс]

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

[Рома Зварич]

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

Ну это так, впечатления.

[Алекс]

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

Answer 2

[Mikhail Osher]

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

// edit

Vue знать не знаю, возможно надо переписать согласно принятым канонам.
И edge-cases покрыть тоже нужно.

https://jsfiddle.net/5zk2sw0j/1/

Comments

[Алекс]

Идея хороша, я даже заинтересовался. Но как вызвать клавиатуру на мобильных телефонах если у нас некуда вводить данные?

[Mikhail Osher]

Алекс, блин, а вот мобилки это уже хороший кейс) Тут без "скрытого" инпута, думаю, не обойтись.