How to make input field type both numeric and password? [duplicate]

Question

I'm aware of this:

<input type="tel">

and I'm aware of this:

<input type="password">

But I would like to use both. I want the numeric keypad to come up on iOS (specifically) but hide each character after it's typed. Is something like this possible?

<input type="tel|password">

Answer 1

For iOS you can set the input to type "password" and still trigger the numeric-keyboard using the HTML5-Attribute "pattern":

<input type="password" pattern="[0-9]*" ... /> 

From the Apple-Documentation:

To display a numeric keyboard, set the value of the pattern attribute to "[0-9]" or "\d".

Answer 2

Html of input box:

<input type="tel" name="password" id="password" value="" placeholder="Enter password"     onfocus="changeToPassword()"> 

Javascript:

// change the type of the input to password function changeToPassword() {     setTimeout(function () {         document.getElementById("password").setAttribute("type", "password")     }, 500); } 

this solution works on the iphone. This is kind of a hack. Once you have the number pad in the next 500 miliseconds you change the attribut to password and that tricks the phone.

Answer 3

You can make the input type password and then use javascript to validate that only numbers have been entered when the submit button has been pressed. http://www.configure-all.com/javascript_form_validation.php