HTML5 Input Type "Number" in Firefox

Question

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

I worked on a very simple function:

<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 fine in Chrome: it turns red and will not let you serve, without me encoding something.

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

Is this a known issue? Workaround

thank

Answer 1

First, do you use Firefox 4? HTML5 form has much better support in version 4.

This page contains detailed information on HTML5 formats and current errors 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 improve support. The documentation contains information on input types .

Answer 2

Is this a known issue?

Yes. Unknown types are treated as text. (And types that appear only in drafts are generally unknown by many browsers)

Workaround

Javascript

Answer 3

input type="number" in Firefox has not yet been implemented since version 25 (November 2013).

Error 344616 is the corresponding Bugzilla @Mozilla ticket: https://bugzilla.mozilla.org/show_bug.cgi?id=344616

March 10, 2014 Patch - Good News! It looks like the ticket has been fixed in Firefox 29, scheduled for release on April 29, 2014.

April 30, 2014 Patch Confirmed, I just tried it, and Firefox 29 supports input type="number" .

Answer 4

No, the browser has not yet understood. Mileage may vary, but it will definitely work in all browsers.

Opera will show you an interface that allows you to press the up and down arrows to increase or decrease the number. However, you can submit the form even if nothing but a number has been entered. Accessibility is not perfect yet, but at least you can also use the keyboard arrows to increase and decrease the number.

Chrome does not yet have a UI for the number, so there is no help or visual hint that the number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough by default, and it is completely unavailable . Chrome is basically the worst violator of all browsers when it comes to accessibility, for example. zero support for ARIA.

You are using an invalid pseudo-class so that the entire input widget is red. Please note that this may be clearer than the default style in Chrome, but it is still not an affordable solution. Since Chrome does not support ARIA, the bad news is that even if you provide a text error message via JavaScript, a blind user or someone else using a screen reader may not hear it at all.

Firefox may be late for this game, but please note that Mozilla has very strict criteria for delivering its features , and Chrome is around without thinking about the consequences.

Answer 5

I use firefox, I had the same problem as my introductory type for inputting characters and spaces, etc .... anyway I use angular 2 in these examples, it is almost like javascript, so you can use this code in each case: here is the html:

 <input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher" (keypress)="FilterInput($event)" /> 

here is the FilterInput function:

 FilterInput(event: any) { let numberEntered = false; if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right //console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); numberEntered = true; } else { //input command entered of delete, backspace or one of the 4 directtion up, down, left and right if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) { //console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); } else { //console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode); event.preventDefault(); } } // input is not impty if (this.validForm) { // a number was typed if (numberEntered) { let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which)); console.log('new number : ' + newNumber); // checking the condition of max value if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) { console.log('valid number : ' + newNumber); } else { console.log('max value will not be valid'); event.preventDefault(); } } // command of delete or backspace was types if (event.keyCode == 46 || event.which == 8) { if (this.numberVoucher >= 1 && this.numberVoucher <= 9) { console.log('min value will not be valid'); this.numberVoucher = 1; //event.preventDefault(); this.validForm = true; } } } // input is empty else { console.log('this.validForm = true'); this.validForm = false; } }; 

in this function, I just had to allow keystrokes, directions, deletions to be entered, so this function simply does not double for a positive integer.

Answer 6

Firefox supports templates since 4.0

  <input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/> 

(For reference see http://html5pattern.com/ )