我正在开发一款只有内部少数人使用的应用程序，所以我可以告诉他们只使用Firefox或Chrome浏览器，这样我就可以使用HTML5。
我正在开发一个非常简单的功能：
<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>
在Chrome中它的表现非常好：变红了并且不允许您提交，而无需我编写其他任何内容。
但是在Firefox中表现不佳。它的行为就像我有一个“文本”类型。
这是已知的问题吗？有没有解决方法？
谢谢
首先，你是否正在使用Firefox 4？HTML5表单在4版本中有更好的支持。
这个页面详细介绍了HTML5表单和当前存在的问题：https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
更新：如果浏览器不支持你想要使用的HTML5功能，请尝试Modernizr。它使用Javascript来增强支持。它的文档提供了关于输入类型的信息。
input type="number"在Firefox 25版本（2013年11月）之前尚未实现。
Bug 344616是Bugzilla@Mozilla中相关的票据：https://bugzilla.mozilla.org/show_bug.cgi?id=344616
更新于2014年3月10日 - 好消息！看起来该票据已在Firefox 29中得到修复，计划在2014年4月29日发布。
更新于2014年4月30日 - 经确认，我试了一下，Firefox 29支持input type="number"。
目前没有任何浏览器支持这个功能。效果可能因浏览器而异，但所有浏览器都需要进行改进。
Opera会显示一个用户界面，让您点击上下箭头来增加或减少数字。即使输入的不是数字，您仍然可以提交表单。可访问性还不完善，但至少您也可以使用键盘上的箭头来增加和减少数字。
Chrome目前还没有数字UI，因此没有帮助或视觉提示表明需要输入数字。Chrome也没有真正的错误消息。将输入边框变成略微红色绝对不足以作为默认值，且它是完全不可访问的。在可访问性方面，Chrome基本上是所有浏览器中最糟糕的，例如，对ARIA的支持为零。
您正在使用:invalid伪类使整个输入部件变为红色。请注意，这可能比Chrome的默认样式更清晰，但它仍然不是一个可访问的解决方案。由于Chrome不支持ARIA，坏消息是，即使通过JavaScript提供文本错误消息，盲人用户或其他使用屏幕阅读器的用户可能根本听不到它。
火狐可能比其他浏览器晚一些，但请认识到 Mozilla 对其功能有非常严格的发布标准，而 Chrome 则不考虑后果随意玩耍。very strict shipping criteria for its features我正在使用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(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;
}
};
自4.0版本起，Firefox已经支持模式。
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
（如需帮助，请参见http://html5pattern.com/）