<input type=’number’> is working well in chrome.
But when you check it with various browsers, then you can find many differences with that numeric inputs.
In Chrome, the form was rendered as:
Looks pretty good, right? Nice and clean. Then I opened it in Firefox:
What the heck? I didn’t add a number spinner in there. After digging around for a bit this is one of the wonderful side affects of a lack of specificity in the official specification. Further, if one continues to read through that particular specification (4.10.5.1.12 Number state (type=number)) one learns a couple of things.
This specification does not define what user interface user agents are to use, and
That it would be inappropriate for credit card numbers or US postal codes.
Okay, so I choose the wrong type for my input field. But what is the deal with that spinner? What if I just want an actual number field but no spinner? Well, you smack it out of there with some CSS and the appearance property. If one uses:
The lovely spinner disappears. I won’t cover the rest of the browsers as they all are similar but slightly different.
When then, do we use <input type=”number”>? Again, in looking at the specification, one would use it when one needs a number that is strictly speaking a number. It is also useful, with the spinner or not, if we want to limit the range and stepping of the number as follows:
<input type=number min=0 step=0.01 name=price>
Conclusion:
Another wonderful discovery of different renderings in different browsers. But, not that we know, we can allow our users to have the same experience in both browsers.
Happy coding!
But when you check it with various browsers, then you can find many differences with that numeric inputs.
In Chrome, the form was rendered as:
Looks pretty good, right? Nice and clean. Then I opened it in Firefox:
What the heck? I didn’t add a number spinner in there. After digging around for a bit this is one of the wonderful side affects of a lack of specificity in the official specification. Further, if one continues to read through that particular specification (4.10.5.1.12 Number state (type=number)) one learns a couple of things.
This specification does not define what user interface user agents are to use, and
That it would be inappropriate for credit card numbers or US postal codes.
Okay, so I choose the wrong type for my input field. But what is the deal with that spinner? What if I just want an actual number field but no spinner? Well, you smack it out of there with some CSS and the appearance property. If one uses:
/* Firefox - remove spinner */
input[type=number] {
-moz-appearance: textfield;
}
The lovely spinner disappears. I won’t cover the rest of the browsers as they all are similar but slightly different.
When then, do we use <input type=”number”>? Again, in looking at the specification, one would use it when one needs a number that is strictly speaking a number. It is also useful, with the spinner or not, if we want to limit the range and stepping of the number as follows:
<input type=number min=0 step=0.01 name=price>
Conclusion:
Another wonderful discovery of different renderings in different browsers. But, not that we know, we can allow our users to have the same experience in both browsers.
Happy coding!
0 Comments