Numeric Inputs and Browser Differences

I was working on a project the other day building a user information input form off of a mock design. Simple enough and then I got to an input requiring numbers for US Postal Codes. “Great!” I thought, “I can use an <input type=’number’> in my form.” Everything was spiffy until I tried it in various browsers. Let’s have a quick look at numeric inputs and browser differences.

Numeric Inputs

In Chrome, the form was rendered as:

No spinner in Chrome!
Chrome

Looks pretty good, right? Nice and clean. Then I opened it in Firefox:

Spinner for Firefox!
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.

  1. This specification does not define what user interface user agents are to use, and
  2. 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!

 

Facebooktwittergoogle_plusredditlinkedinmail