Is there a way to have a masked numeric input field?

Question

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!

Answer 1

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.