HTML 5 Input type "number" in Firefox

Question

I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.

I was working on a very simple feature:

<style> 
input:invalid { background-color: red; }
div.box {
border-color:#000; 
border-width:thin; 
border-style:solid;
}
</style>     
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small> 

It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.

Firefox ... not so much. It acts as if I had a "text" type.

Is that a known issue? Workaround?

Thanks

Answer 1

Is that a known issue?

Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)

Workaround?

JavaScript

Answer 2

First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.

This page has details on HTML5 forms and the current bugs https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.

Answer 3

No browser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.

Opera will show you an UI letting you click arrows up and down to increase or decrease the number. You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.

Chrome has no UI for the number yet, thus there is no help or no visual hint that a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.

You are using the :invalid pseudo-class to make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.

Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.