23

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

3 Answers 3

17

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

4
  • This answer is underrated and a much better way of accomplishing what was asked, specifically in iOS. May 1, 2014 at 17:37
  • 4
    Unfortunately, it doesn't work on Android
    – SILENT
    Dec 3, 2015 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, 2016 at 18:38
  • 1
    I tried this but doesn't work too pattern="[0-9]*" inputmode="numeric"
    – Mark Thien
    Jul 13, 2016 at 13:13
8

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.

1
  • 4
    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, 2014 at 3:55
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

2
  • 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. Jan 15, 2012 at 21:55
  • Answer link is no longer valid. What would be an updated link to help?
    – Whitecat
    Oct 24, 2017 at 18:28

Not the answer you're looking for? Browse other questions tagged or ask your own question.