HTML maxlength属性不适用于chrome和safari？

Question

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius">

这是我的HTML,用firebug(在chrome上).

我可以在表单字段中编写尽可能多的字符 - 在Chrome和Safari中.

在Firefox或IE10上,限制很好.

我没有在网上找到这个问题.

注意:type ="number" - 不是文本.

有人以前见过这个问题吗？

Answer 1

使用max属性输入type="number".它将指定您可以插入的最高编号

  <input type="number" max="999" />

如果同时添加最大值和最小值,则可以指定允许值的范围:

  <input type="number" min="1" max="999" />

看这个例子

编辑

如果为了用户体验,您希望用户不能输入超过一定数量的数字,请使用Javascript/jQuery,如本例所示

Answer 2

最大长度将无法使用<input type="number"我知道的最佳方式使用oninput事件来限制maxlength.请参阅以下代码.

<input name="somename"
        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
        type = "number"
        maxlength = "6"
     />

Answer 3

maxlength属性不适用于type ="number"的输入

从关于type ="number"的W3 HTML5规范

不得指定以下内容属性,并且不适用于该元素:accept,alt,checked,dirname,formaction,formenctype,formmethod,formnovalidate,formtarget,height,maxlength,multiple,pattern,size,src和width.

来源:http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (在簿记详情下)

在FF和IE中,输入回退为文本输入,因此maxlength适用于输入.一旦FF和IE实现type ="number",它们也应该以maxlength不适用的方式实现它.

Answer 4

对于那些仍然无法让它工作的人......试试这个来启动更胖的数字键盘：

<input type="number" name="no1" maxlength="1" size="1" max="9" pattern="[0-9]*" />

和js：

$('input[name="no1"]').keypress(function() {
    if (this.value.length >= 1) {
        return false;
    }
});