当输入类型=密码时，如何确保立即进行值屏蔽，而不会在电话上造成延迟？

Question

我正在一个项目中，我有5个类型为password的输入框，输入完每个输入后，控件转到下一个框。

但是只有输入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”，也发生了相同的数字掩盖延迟

确保屏蔽输入没有延迟的最佳方法是什么？

Answer 1

为什么它不在台式机设备上发生？

因为在手机上打字比较困难，所以您用手指覆盖了一个很小的屏幕键盘，从而试图做出最佳猜测，以估计肉块最有可能击中屏幕的位置。 您几乎需要视觉确认，以确保您没有键入错误的密钥。 由于这些原因，这是手机的默认行为。

在台式设备上的大型物理键盘上键入不会出现这些问题，并且视觉反馈不是必需的。 与在台式机设备上做相同的事情相比，只需将屏幕转小一点就可以覆盖一个很小的电话屏幕。

Answer 2

这是移动浏览器当前处理密码输入的方​​式，考虑了安全性和可用性问题，与非移动浏览器相比，这些问题显然面临不同的挑战。

请参阅https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password

各个浏览器的输入过程如何进行，具体细节可能有所不同； 例如，移动设备经常在打出键入的字符之前先显示一会儿，以使用户确定自己按下了要按的键； 鉴于键的尺寸小并且可以轻松按错键（特别是在虚拟键盘上），这很有用。