Question

我正在使用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中运行。或者，可能的解决办法是什么。

Answer 1

firefox或Internet Explorer不支持，但版本11支持部分支持。请参阅this comparison matrix。

您可以使用number polyfill填充程序来获取对不受支持的浏览器的支持。

Answer 2

Firefox或IE9（几乎在IE10中）尚不支持输入类型number，因此它将恢复为输入类型text。

请参阅this compatibility chart。

实际上不需要“补丁或黑客” - 常规输入字段可以正常工作。这就是它恢复到文本字段的原因。它是否显示为最终用户的实际数字字段只是奖励，以使其更方便。您仍然应该对发送给您的任何值进行服务器端检查，因此允许用户在浏览器不支持数字类型时只键入数字不应该损害任何内容。

Answer 3

或者，您可以使用具有pattern=""属性的文本字段。虽然没有具有向上和向下按钮，但确实验证是否具有正确的值：

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

您可以将模式更改为您的数量愿望，现在设置的值范围为 1 到 9 。您还可以添加带有热键的JS / jQuery的向上/向下按钮，以获得更多数字字段的感觉。

Answer 4

注意：Internet Explorer 9及更早版本或Firefox中不支持该标记的min属性。

注意：由于IE 10不支持这些输入类型，因此min属性不适用于Internet Explorer 10中的日期和时间。

来源：http://www.w3schools.com/tags/att_input_min.asp

Answer 5

不支持。

如果您确实需要，可以使用javascript获得相同的结果。

有很多例子： Increment value of textinput with jquery like spinner

Answer 6

我正在使用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;
        }
    };

在这个函数中，我只需要按下数字，方向，删除键进入。

Answer 7

要仅允许在输入中写入数字和点，我们必须获取所按下键的值并将其与REGEX（test（）方法）进行比较，否则将不执行该事件。

const input = document.getElementById("numberInput");    

input.addEventListener("keypress", e => {

    // If the input is empty and the key pressed is "0" nothing is printed
    if (!e.target.value && e.key == 0) {

        e.preventDefault();

    } else {

        // If the key pressed is not a number or a period, nothing is printed
        if (!/[0-9.]/.test(keyValue)) {

            e.preventDefault();

        }

    }

}

我还创建了一个函数，该函数最多可以写入三个整数和两个十进制数。希望对您有帮助。

我通常在Twitter（@PabloAndresValC）上发布对我有帮助的信息或一些解决方案

input.addEventListener("keypress", e => {

    const keyValue = e.key;

    // If the input is empty and the key pressed is "0" nothing is printed
    if (!e.target.value && keyValue == 0) {

        e.preventDefault();

    } else {
        // If the key pressed is not a number or a period, nothing is printed
        if (!/[0-9.]/.test(keyValue)) {

            e.preventDefault();

        } else {
            // If the number has one or two whole numbers and a point, another 
            // point won't be printed
            if (/[0-9]{1,2}[.]/.test(e.target.value) && keyValue == ".") {

                e.preventDefault();

            } 
             // If the number has one or two whole numbers and a point
            else if (/[0-9]{1,2}[.]/.test(e.target.value)) {
                // We can write up to two more numbers after the point
                if (/[0-9]{1,2}[.][0-9]{2}/.test(e.target.value)) {

                    e.preventDefault();

                }

            } 
            // If there are 3 numbers and we press another, a point 
            // will be printed automatically
            // And we can write up to two more numbers after the point
            else if (/[0-9]{3}/.test(e.target.value) && keyValue != ".") {

                    e.target.value += ".";

                if (/[0-9]{3}[.][0-9]{2}/.test(e.target.value)) {

                    e.preventDefault();

                }

            }

        }
        
    }
});

Answer 8

Firefox 89.0 解决了这个问题。

HTML5输入类型号在Firefox中不起作用

8 个答案: