How to make input field type both numeric and password?

html input passwords numeric
kaleazy picture kaleazy · Jan 15, 2012 · Viewed 26.1k times · Source

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

marco picture marco · Nov 21, 2013

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

Related questions

Set the value of an input field

How would you set the default value of a form <input> text field in JavaScript?

Read More
Is there any way to change input type="date" format?

I'm working with HTML5 elements on my webpage. By default input type="date" shows date as YYYY-MM-DD. The question is, is it possible to change its format to something like: DD-MM-YYYY?

Read More
How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

I would like to add a current date to a hidden HTML tag so that it can be sent to the server: <input type="hidden" id="DATE" name="DATE" value="WOULD_LIKE_TO_ADD_DATE_HERE"> How can …

Read More