Html HTML5 输入类型号在 Firefox 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17976393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 input type number not working in firefox
提问by Mohit Bhansali
I am using HTML5 input type=number. Its working perfectly in Chrome browser, but its not working in Firefox and IE9.
我正在使用HTML5 input type=number. 它在 Chrome 浏览器中完美运行，但在 Firefox 和 IE9 中不起作用。
I want to increment the quantity by onei.e. step=1and also I have set min=1.
我想通过oneie增加数量，step=1并且我已经设置了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.
是否有任何补丁或黑客可以使其在 Firefox 和 IE9 中工作。否则，可能的解决方案是什么。
采纳答案by JerryHuang.me
Note: The min attribute of the tag is not supported in Internet Explorer 9 and earlier versions, or in Firefox.
注意：Internet Explorer 9 及更早版本或 Firefox 不支持标签的 min 属性。
Note: The min attribute will not work for dates and time in Internet Explorer 10, since IE 10 does not support these input types.
注意：min 属性不适用于 Internet Explorer 10 中的日期和时间，因为 IE 10 不支持这些输入类型。
回答by Burhan Khalid
It is not supported in firefox or internet explorer, except for version 11 which has partial support. See this comparison matrix.
Firefox 或 Internet Explorer 不支持它，但部分支持的版本 11 除外。请参阅此比较矩阵。
You can use the number polyfillshim to get support for unsupported browsers.
您可以使用数字 polyfillshim 来获得对不受支持的浏览器的支持。
回答by Richard de Wit
Alternately, you can use a textfield with a pattern=""attribute. Although it doesn'thave the up and down buttons, it doesvalidate for having the correct values:
或者，您可以使用带有pattern=""属性的文本字段。虽然它没有向上和向下按钮，但它确实具有正确的值：
<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 1to 9. Also you can add up/down buttons with JS/jQuery that have hotkeys bound to them for a more number-field-like feel.
您可以根据您的数量希望更改模式，现在它的值设置为1到9。您也可以使用 JS/jQuery 添加向上/向下按钮，这些按钮绑定了热键以获得更像数字字段的感觉。
回答by animuson
The input type numberis not supported yet in Firefox or IE9 (almost in IE10), so it will revert to input type text.
numberFirefox 或 IE9（几乎在 IE10 中）尚不支持输入类型，因此它将恢复为输入类型text。
请参阅此兼容性图表。
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 bonusto 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.
真的不需要“补丁或黑客” - 常规输入字段就可以正常工作。这就是它恢复为文本字段的原因。无论它是否显示为实际数场终端用户只是奖金，使其稍微更方便。您仍然应该对发送给您的任何值进行服务器端检查，因此当用户的浏览器不支持数字类型时，允许用户仅输入数字应该不会造成任何伤害。
回答by Abdelhalim FELLAGUE CHEBRA
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 :
我正在使用 firefox，我在开发我的输入类型数字输入字符和空格等时遇到了同样的问题......无论如何我在这个例子中使用了 angular 2，它几乎类似于 JavaScript，所以你可以在任何情况下使用这个代码：here是 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 ：
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.
在这个函数中，我只需要让数字键、方向键、删除键进入。
回答by Yoann Augen
It's not supported.
不支持。
You can use javascript for the same result if you really need it.
如果你真的需要它，你可以使用 javascript 来获得相同的结果。
There are lot of examples : Increment value of textinput with jquery like spinner
