How to make input field type both numeric and password?

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

This should be what you're working for: http://stackoverflow.com/a/8334379/947898. — uadrive, Jan 15 '12 at 18:38

score 16 · Answer 1 · answered Nov 21 '13 at 15:28

16

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

answered Nov 21 '13 at 15:28

marco

239
2
4

This answer is underrated and a much better way of accomplishing what was asked, specifically in iOS. – LP Papillon May 01 '14 at 17:37
4

Unfortunately, it doesn't work on Android – SILENT Dec 03 '15 at 20:45
3

This won't work in iOS, at least iOS9. setting the type to passwords invalidates the pattern and inputmode attributes. – cduguet Jan 22 '16 at 18:38
1

I tried this but doesn't work too pattern="[0-9]*" inputmode="numeric" – Mark Thien Jul 13 '16 at 13:13

score 8 · Answer 2 · answered Sep 24 '13 at 21:56

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.

This wont work again. After someone enters the information and blurs out and tries to re enter the information, now the type is already set to password, number keypad wont come. — Fyre, Oct 14 '14 at 03:55

score 1 · Answer 3 · answered Jan 15 '12 at 18:41

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

answered Jan 15 '12 at 18:41

Alex Datcu

53
1
2
5

1

This would've been my answer too, but it seems that the OP wants to enable some iOS-specific UI features that are normally triggered by `type="tel"`. I don't think JS input validation will help with that. – Ilmari Karonen Jan 15 '12 at 21:55
Answer link is no longer valid. What would be an updated link to help? – Whitecat Oct 24 '17 at 18:28

How to make input field type both numeric and password?

3 Answers3

Linked