So I have an existing HTML page that has a field for Last 4 digits of Credit Card:
<input value="" name="Last4ofCC" maxlength="4" id="Last4ofCC1">
Works great, but a feature request just came in to make it a numeric field and not allow non-numeric characters.
At first I thought of plugging in some Javascript, but then I thought, why not just use an HTML5 element. I changed to the following:
<input type="number" value="" name="Last4ofCC" max="4" id="Last4ofCC1">
But not only does it still allow non-numeric characters, the max attribute doesn’t work either! I’m testing this on FireFox 8, so not sure what the problem is.
Does anyone know what I’ve done wrong here?
you need to include the proper doctype at the top of your page in addition to changing your input types.
However, it’s not going to do what you think it’s going to. Setting an input as a
type="number"will pretty much only get you the spinners on the side and tell the form what it should be. If you want to ensure only digits are entered, you will need to do a regex, like/^\d+$/on keyup.More info on HTML5