How to make input field type both numeric and pass

Question

This question already has an answer here:

• Is there a way to have a masked numeric input field? 1 answer

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

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

Answer 2

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 3

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.