javascript - 如何确保在输入类型=密码时立即发生值屏蔽，而不会在电话上延迟？

Question

我正在做一个项目，其中我有 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" 之后，也会发生相同的屏蔽数字延迟

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

标签： javascripthtmlweb

Answer 1

为什么它不在桌面设备上发生？

因为在手机上打字比较困难，你用手指覆盖一个小的屏幕键盘，它试图做出最好的猜测，估计你的肉块最有可能在哪里打到屏幕上。您几乎需要视觉确认来确保您没有输入错误的键。由于这些原因，这是手机的默认行为。

在桌面设备上的大型物理键盘上打字没有这些问题，视觉反馈也不是必需的。与在桌面设备上做同样的事情相比，只需转身一秒钟就可以覆盖一个很小的手机屏幕。