28

I am creating an HTML5 application on an Android and for this specific scenario, we have an input field that is for a credit card's security code and we want to force the input field to be numberic only and masked.

I have had no luck searching for this specific case and from everything I can tell from researching/trying it out for myself is that this can't be done purely through HTML5 (since number and password are both options for type and only one type can be used). Am I missing something and there is a way to pop-up the numeric keyboard while having the input be masked through HTML5 or is there another way to force the keyboard input type or masking the input through CSS or JavaScript?

Thanks for any help!

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
JakeW
  • 303
  • 1
  • 3
  • 7
  • When you say 'purely through HTML5' do you really mean 'without JavaScript'? – robertc Nov 30 '11 at 22:59
  • Preferably I would like to solely use the parameters of the input field; however I am open to using JavaScript. The only potential solution I can think of is default the field to type number and on a focus event change the type to password in JS. I haven't tested it so I'm not sure how Android would handle that. – JakeW Nov 30 '11 at 23:05
  • @user1074240, do you mean like a pin number field? If so, use a `password` field, but validate that the value must be numeric. – zzzzBov Nov 30 '11 at 23:29
  • robertc below helped me with a solution. But the reason I can't do the validation through JS is because we want the numeric keyboard to pop-up on the device instead of the alpha-numeric keyboard. – JakeW Nov 30 '11 at 23:45
  • your answer to use webkit-text-security is used by us but we face issues on ICS version of android (e.g. galaxy S3 & galaxy Nexus) No workaround i was able to find for this :( – saurabh Oct 26 '12 at 06:39

1 Answers1

45

If it's only required to work in WebKit based browsers, and CSS is allowed in 'purely through HTML5', you could try:

input[type=number] {
    -webkit-text-security: disc;
}

I'm not sure if there's currently any equivalent for other browsers, in the future this may be controllable through the appearance CSS property. The CSS3 version of appearance has been dropped from the spec, so it looks like you'll have to wait for the standardization of text-security for a cross browser solution.

robertc
  • 74,533
  • 18
  • 193
  • 177