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

Question

I'm working on a project wherein I have 5 input boxes of type password and after every input has been entered, the control goes to the next box.

But only after 3 or 4 inputs have been entered, are the previous digits getting masked. There is a delay of about 3-4 seconds only after which the key is getting masked.

Initially, I thought that it might be because of the keydown/keyup functions linked to the input boxes, but the masking delay is happening even after I removed all key events.

One thing I noticed was the same issue isn't occurring on a desktop, but it's happening only on mobile.

 <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> 

The same delay in masking the digits is happening even after I used input type = "tel"

What is the best way to ensure that there is no delay in masking inputs?

Answer 1

Why isn't it occurring on a desktop device?

Because it's harder to type on a phone, where you're covering a tiny on-screen keyboard with your fingers which tries to make a best guess estimation where your meat nubs intended to hit the screen most likely. You pretty much need the visual confirmation to ensure you didn't mistype that key. It's the default behaviour of the phone, for those reasons.

Typing on a large physical keyboard on a desktop device has none of those issues and the visual feedback isn't as necessary. It's also a lot easier to cover a tiny phone screen by simply turning away for a second than it is to do the same thing on a desktop device.

Answer 2

This is the way mobile browsers currently handle password inputs, accounting for both security and usability issues which obviously have different challenges compared to non-mobile browsers.

Please see 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.