CODEWITHSUNDEEP
htmlfirefox
user5443928
user5443928

Reputation:

Input type number is not working in firefox

I have an issue.I have an input field which type is number but its taking any alphabet in mozila firefox browser.Its working great in chrome but not working in firefox.I need it should work as chrome and not take any alphabet.I am using Mozila firefox version 48.0.I am explaining my code below.

<input type="number"  class="form-control oditek-form"  ng-model="type" name="type" step="1" min="0" placeholder="Add Type">

Please help me.

Upvotes: 3

Views: 7745

Answers (2)

Abdelhalim FELLAGUE CHEBRA
Abdelhalim FELLAGUE CHEBRA

Reputation: 687

i am using firefox too, i had the same issue developing my input type number typing caracters and spaces etc... i have found the solution of the tag pattern="[1-9]", but unfortunately it didn't work for me. After a wile of searching without any result, i decided to develop my own function. anyway i m using angular 2 in this examples, its 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.

Upvotes: 1

Bilal Zafar
Bilal Zafar

Reputation: 457

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

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

Upvotes: 0

Related Questions