10

我正在使用HTML5 input type=number. 它在 Chrome 浏览器中运行良好,但在 Firefox 和 IE9 中无法运行。

我想通过oneie增加数量,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>

是否有任何补丁或 hack 可以使其在 Firefox 和 IE9 中运行。否则,可能的解决方案是什么。

4

8 回答 8

12

Firefox 或 Internet Explorer 不支持它,但有部分支持的版本 11 除外。请参阅此比较矩阵

您可以使用数字 polyfill shim 来获得对不受支持的浏览器的支持。

于 2013-07-31T17:02:47.953 回答
6

或者,您可以使用带有pattern=""属性的文本字段。尽管它没有向上和向下按钮,但它确实可以验证是否具有正确的值:

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

您可以将模式更改为您希望的数量,它现在设置为从19的值。您还可以使用绑定了热键的 JS/jQuery 添加向上/向下按钮,以获得更多类似数字字段的感觉。

于 2013-11-08T09:35:11.207 回答
3

numberFirefox 或 IE9(几乎在 IE10 中)尚不支持输入类型,因此它将恢复为输入类型text

请参阅此兼容性图表

真的不需要“补丁或破解” - 常规输入字段就可以了。这就是它恢复为文本字段的原因。它是否显示为最终用户的实际数字字段只是一个奖励,使其稍微方便一些。您仍然应该对发送给您的任何值进行服务器端检查,因此允许用户在他们的浏览器不支持数字类型时只输入数字不应该有任何损害。

于 2013-07-31T17:03:18.240 回答
2

不支持。

如果你真的需要它,你可以使用 javascript 来获得相同的结果。

有很多例子: 使用 jquery 增加 textinput 的值,比如 spinner

于 2013-07-31T17:09:06.443 回答
2

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

在这个功能中,我必须让数字、方向、删除键进入。

于 2017-04-17T14:01:53.983 回答
2

为了只允许在输入中写入数字和点,我们必须获取按下键的值并将其与 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();

        }

    }

}

我还创建了一个函数,允许写入最多三个整数和两个十进制数。我希望它对你有帮助。

我通常在我的推特 ( @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();

                }

            }

        }
        
    }
});
于 2020-09-18T02:53:33.417 回答
0

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

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

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

于 2013-07-31T16:59:02.157 回答
0

Firefox 89.0 解决了这个问题。

于 2021-06-14T08:38:58.037 回答