Html Firefox 中的 HTML5 输入类型“数字”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3269004/
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" in Firefox
提问by Nathan H
I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
我正在开发一个只有少数人在内部使用的应用程序，所以我很乐意告诉他们只使用 Firefox 或 Chrome，这样我就可以使用 HTML5。
I was working on a very simple feature:
我正在研究一个非常简单的功能：
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
它在 Chrome 中运行良好：它会变成红色并且不会让您提交，而我无需编写任何其他代码。
Firefox ... not so much. It acts as if I had a "text" type.
Firefox ... 没那么多。它就像我有一个“文本”类型。
Is that a known issue? Workaround?
这是一个已知问题吗？解决方法？
Thanks
谢谢
采纳答案by andyuk
First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
首先，您使用的是 Firefox 4 吗？HTML5 表单在版本 4 中有更好的支持。
This page has details on HTML5 forms and the current bugs https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
此页面包含有关 HTML5 表单和当前错误的详细信息 https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.
更新：如果浏览器不支持您要使用的 HTML5 功能，请尝试Modernizr。它使用 Javascript 来增强支持。它的文档包含有关输入类型的信息。
回答by Quentin
Is that a known issue?
这是一个已知问题吗？
Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)
是的。未知类型被视为文本。（并且仅出现在规范草案中的类型往往不被许多浏览器所知晓）
Workaround?
解决方法？
回答by Jon Schneider
input type="number"is not implemented in Firefox yet as of version 25 (November 2013).
input type="number"从版本 25（2013 年 11 月）起，Firefox 中尚未实现。
Bug 344616 is the relevant ticket in Bugzilla@Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Bug 344616 是 Bugzilla@Mozilla 中的相关票证：https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Update 10 March 2014- Good news! Looks like the ticket was fixed in Firefox 29, scheduledfor release on 29 April 2014.
2014年3 月 10 日更新- 好消息！看起来该票已在 Firefox 29 中修复，计划于 2014 年 4 月 29 日发布。
Update 30 April 2014- Confirmed, I just gave it a try, and Firefox 29 has support for input type="number".
2014年4 月 30 日更新- 确认，我只是试了一下，Firefox 29 支持input type="number".
回答by itpastorn
Nobrowser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.
还没有浏览器得到这个。里程可能会有所不同，但在所有浏览器中肯定有工作要做。
Opera will show you an UI letting you click arrows up and down to increase or decrease the number. You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.
Opera 将向您显示一个用户界面，让您可以单击上下箭头来增加或减少数字。但是，即使输入了数字以外的任何内容，您也可以提交表单。辅助功能尚不完善，但至少您还可以使用键盘的箭头来增加和减少数字。
Chrome has no UI for the number yet, thus there is no help or no visual hintthat a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.
Chrome 还没有该数字的 UI，因此没有任何帮助或视觉提示来表示预期的数字。Chrome 也没有真正的错误消息。将输入边框略为红色作为默认设置绝对不够好，而且完全无法访问。在可访问性方面，Chrome 基本上是所有浏览器中最糟糕的，例如对 ARIA 的零支持。
You are using the :invalid pseudo-classto make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.
您正在使用:invalid 伪类使整个输入小部件变为红色。请注意，这可能比 Chrome 中的默认样式更清晰，但它仍然不是一个可访问的解决方案。由于 Chrome 不支持 ARIA，坏消息是即使您通过 JavaScript 提供文本错误消息，盲人用户或其他任何使用屏幕阅读器的人也可能根本听不到它。
Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.
回答by Abdelhalim FELLAGUE CHEBRA
i am using firefox, i had the same issue developing my input type number typing caracters and spaces etc... 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 :
我正在使用 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)" />
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, so this function is just for the positive integer not doubles.
在这个函数中，我只需要让数字、方向、删除的按键进入，所以这个函数只是针对正整数而不是加倍。
回答by user671843
Firefox has supported patterns since 4.0
Firefox 从 4.0 开始支持模式
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
(For help, see http://html5pattern.com/)
（如需帮助，请参阅http://html5pattern.com/）
