Как обеспечить, чтобы маскирование значения происходило немедленно, когда тип ввода = пароль, без задержки на телефоне?
Я работаю над проектом, в котором у меня есть 5 полей ввода типа пароля, и после ввода каждого ввода элемент управления переходит в следующее поле.
Но только после ввода 3 или 4 входов предыдущие цифры маскируются. Есть задержка около 3-4 секунд, только после которой клавиша маскируется.
Первоначально я думал, что это может быть из-за функций keydown / keyup, связанных с полями ввода, но задержка маскирования происходит даже после того, как я удалил все ключевые события.
Одна вещь, которую я заметил, заключалась в том, что эта проблема не возникает на настольном компьютере, а возникает только на мобильных устройствах.
<div class = "pin-div" id = "form-group-id">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" id = "pin-a">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" disabled = "disabled" id = "pin-b">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" disabled = "disabled" id = "pin-c">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" disabled = "disabled" id = "pin-d">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" disabled = "disabled" id = "pin-e">
<input name = "pin" class = "pin-inp" tabindex = "0" type = "password" maxlength = "1" pattern = "[0-9]*" inputmode = "numeric" autocomplete = "off" disabled = "disabled" id = "pin-f">
</div>Такая же задержка при маскировании цифр происходит даже после того, как я использовал input type = "tel"
Как лучше всего гарантировать отсутствие задержки при маскировании входных данных?
Почему этого не происходит на настольном устройстве? А есть способ сразу замаскировать на телефоне?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Именно так мобильные браузеры в настоящее время обрабатывают ввод пароля, учитывая как проблемы безопасности, так и удобства использования, которые, очевидно, имеют другие проблемы по сравнению с немобильными браузерами.
См. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
Specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.
Why isn't it occurring on a desktop device?
Потому что труднее набирать текст на телефоне, когда вы закрываете пальцами крошечную экранную клавиатуру, которая пытается максимально точно определить, где ваши мясные кусочки, скорее всего, коснутся экрана. Вы в значительной степени необходимость визуальное подтверждение, чтобы убедиться, что вы не ошиблись при вводе этого ключа. По этим причинам это поведение телефона по умолчанию.
При вводе текста на большой физической клавиатуре на настольном устройстве этих проблем нет, и визуальная обратная связь не так необходима. Также намного проще закрыть крошечный экран телефона, просто отвернувшись на секунду, чем сделать то же самое на настольном устройстве.
Разве это не поведение по умолчанию?