Menu
On my site designed for mobile devices I have an input field that is used for PIN numbers. I want the text to be hidden as it is entered and I want the number pad to pop up when the user on the mobile device wants to enter the PIN. The number pad pops up when Type="Number" but not when Type="Password" and I can't (Or don't know how to) set Type="Number and Password".
Any Ideas?
Thanks in advance!
436
First, create an <input> element with the type of password and an icon that allows users to click it to toggle the visibility of the password. Second, bind an event handler to the click event of the icon. If the icon is clicked, toggle the type attribute of the password field between text and password .
Definition and UsageThe <input type="number"> defines a field for entering a number. Use the following attributes to specify restrictions: max - specifies the maximum value allowed. min - specifies the minimum value allowed.
The <input type="password"> defines a password field (characters are masked).
Some browsers (iOS) recognize the specific pattern attribute value of [0-9]* as triggering numeric keypad.
The HTML 5.1 draft contains the inputmode attribute, which has been designed to address the specific issue of input mode (like key pad) selection, but it has not been implemented yet.
You could use it for the future, though – even though the current HTML 5.1 does not allow it for type=password, for some odd reason.
<input type="password" pattern="[0-9]*" inputmode="numeric"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
