當輸入類型=密碼時，如何確保立即進行值屏蔽，而不會在電話上造成延遲？

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

各個瀏覽器的輸入過程如何進行，具體細節可能有所不同； 例如，移動設備經常在打出鍵入的字符之前先顯示一會兒，以使用戶確定自己按下了要按的鍵； 鑒於鍵的尺寸小並且可以輕松按錯鍵（特別是在虛擬鍵盤上），這很有用。