HTML5 input type number not working in firefox

问题

I am using HTML5 input type=number. Its working perfectly in Chrome browser, but its not working in Firefox and IE9.

I want to increment the quantity by one i.e. step=1 and also I have set min=1.

I am using the following code:

<form action="" class="cart" method="post" enctype='multipart/form-data'>
    <div class="quantity">
        <input type="number" step="1" min="1"  name="quantity" value="1" title="Qty" class="input-text qty text" />
    </div>
    <button type="submit" class="single_add_to_cart_button button alt">Add to cart</button>     
</form>

Is there any patch or hack to make it work in Firefox and IE9. Or else, what could be the possible solution for that.

回答1:

Note: The min attribute of the tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.

Note: The min attribute will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.

Source: http://www.w3schools.com/tags/att_input_min.asp

回答2:

It is not supported in firefox or internet explorer, except for version 11 which has partial support. See this comparison matrix.

You can use the number polyfill shim to get support for unsupported browsers.

回答3:

Alternately, you can use a textfield with a pattern="" attribute. Although it doesn't have the up and down buttons, it does validate for having the correct values:

<input type="text"
       name="quantity"
       pattern="[1-9]"
       value="1"
       required
       title="Qty"
       class="input-text qty text"
/>

You can alter the pattern to your quantity wishes, it is now set for a value ranging from 1 to 9. Also you can add up/down buttons with JS/jQuery that have hotkeys bound to them for a more number-field-like feel.

回答4:

The input type number is not supported yet in Firefox or IE9 (almost in IE10), so it will revert to input type text.

See this compatibility chart.

There's really no need for a "patch or hack" - a regular input field will work just fine. That's why it reverts to a text field. Whether or not it displays as an actual number field to the end-user is just a bonus to make it slightly more convenient. You should still be doing server-side checks on whatever value is sent to you, so allowing a user to just type in a number when their browser doesn't support the number type shouldn't harm anything.

回答5:

It's not supported.

You can use javascript for the same result if you really need it.

There are lot of examples : Increment value of textinput with jquery like spinner

回答6:

I am using firefox, I had the same issue developing my input type number typing characters and spaces etc... anyway I am using angular 2 in this example, it's almost similar to JavaScript, so you can use this code in every 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 function FilterInput :

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 had to just let the keypress of numbers, direction, deletes enter.

来源：https://stackoverflow.com/questions/17976393/html5-input-type-number-not-working-in-firefox

标签

html

forms