Question

我正在开发一款仅供内部少数人使用的应用，因此我很乐意告诉他们只使用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 ......不是那么多。它就好像我有一个“文本”类型。

这是一个已知问题吗？解决办法：

由于

Answer 1

首先，您使用的是Firefox 4吗？ HTML5表单在版本4中有更好的支持。

此页面包含有关HTML5表单和当前错误的详细信息 https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms

更新：如果浏览器不支持您要使用的HTML5功能，请尝试Modernizr。它使用Javascript来增强支持。它的文档有information about input types。

Answer 2

这是一个已知问题吗？

是。未知类型被视为文本。（并且只出现在草案规范中的类型往往不为许多浏览器所知）

解决方法

JavaScript

Answer 3

自版本25（2013年11月）起，Firefox中未实现

input type="number"。

错误344616是Bugzilla @ Mozilla中的相关票证：https://bugzilla.mozilla.org/show_bug.cgi?id=344616

2014年3月10日更新 - 好消息！看起来这张票已在Firefox 29中修复，scheduled将于2014年4月29日发布。

2014年4月30日更新 - 确认，我刚试了一下，Firefox 29支持input type="number"。

Answer 4

没有浏览器可以获得此功能。里程可能会有所不同，但所有浏览器肯定都有工作要做。

Opera会向您显示一个用户界面，让您上下单击箭头以增加或减少数字。但是，即使输入了任何数字，您也可以提交表格。可访问性还不完善，但至少你也可以使用键盘的箭头来增加和减少数量。

Chrome目前还没有该号码的用户界面，因此没有任何帮助或没有视觉提示表示该号码是预期的。 Chrome也没有真正的错误消息。将输入边框略微变为红色绝对不足以作为默认值并且完全无法访问。在可访问性方面，Chrome基本上是所有浏览器中最糟糕的攻击者，例如对ARIA的零支持。

您正在使用：invalid pseudo-class 使整个输入窗口小部件变为红色。请注意，这可能比Chrome中的默认样式更清晰，但它仍然不是一个可访问的解决方案。由于Chrome不支持ARIA，所以坏消息是，即使您通过JavaScript，盲人用户或使用屏幕阅读器的任何其他人提供文本错误消息，也可能根本听不到它。

Firefox可能会迟到这个游戏，但请注意Mozilla有very strict shipping criteria for its features这一事实，而Chrome则不会考虑后果。

Answer 5

我正在使用firefox，我有同样的问题开发我的输入类型编号键入caracters和空格等... 无论如何我在这个例子中使用角度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 6

Firefox自4.0以来支持模式

 <input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>

（如需帮助，请参阅http://html5pattern.com/）

HTML5在Firefox中输入“number”

6 个答案: