Номер типа ввода HTML5 не работает в firefox

я использую HTML5 input type=number. Он отлично работает в браузере Chrome, но не работает в Firefox и IE9.

Я хочу увеличить количество one то есть step=1 и я поставил min=1.

я использую следующий код:

<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>

есть ли патч или хак, чтобы заставить его работать в Firefox и IE9. Или же, что может быть возможным решением для этого.

6
forms html html5

6 ответов

Примечание: атрибут min тега не поддерживается в Internet Explorer 9 и более ранних версиях или в Firefox.

Примечание: атрибут min не будет работать для дат и времени в Internet Explorer 10, так как IE 10 не поддерживает эти типы ввода.

источник:http://www.w3schools.com/tags/att_input_min.asp

1

Он не поддерживается в firefox или internet explorer, за исключением версии 11, которая имеет частичную поддержку. См.эта матрица сравнения.

можно использовать номер polyfill прокладка для получения поддержки неподдерживаемых браузеров.

10

тип number еще не поддерживается в Firefox или IE9 (почти в IE10), поэтому он вернется к типу ввода text.

посмотреть эта таблица совместимости.

на самом деле нет необходимости в "исправлении или взломе" - обычное поле ввода будет работать нормально. Вот почему он возвращается в текстовое поле. Независимо от того, отображается ли оно в качестве фактического числового поля для конечного пользователя, это просто бонус чтобы сделать его немного более удобным. Ты все еще должен выполняйте серверные проверки любого значения, отправленного вам, поэтому, позволяя пользователю просто ввести номер, когда их браузер не поддерживает тип номера, ничего не должно повредить.

4

кроме того, вы можете использовать текстовое поле с

4

Это не поддерживается.

вы можете использовать javascript для того же результата, если вам это действительно нужно.

есть много примеров : значение приращения textinput с jquery, как spinner

1

Я использую firefox, у меня была такая же проблема с разработкой моего номера типа ввода, набрав карактеры и пробелы и т. д... во всяком случае, я использую angular 2 в этих примерах, его почти похож на javascript, поэтому вы можете использовать этот код в каждом случае : вот html:

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

вот функция 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;
        }
    };

в этой функции я должен был просто позволить нажатию клавиш чисел, направление, удаляет enter.

1