maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
maxlength属性对<input type="number">不起作用。这只发生在Chrome。
<input type="number" class="test_css" maxlength="4" id="flight_number" name="number"/>
当前回答
<input type="number"> is just that…一个数字输入(尽管不能通过Javascript从字符串转换为浮点数)。
我猜,它不会限制字符的maxLength的关键输入,否则你的用户可能会陷入“关键陷阱”,如果他们忘记了一个小数在开始(尝试放一个。在索引1,当<输入类型"text"> "maxLength" attr已经到达)。然而,如果你设置了max属性,它将在表单提交时验证。
如果试图限制/验证一个电话号码,请使用type="tel" attr/value。它遵从maxLength attr,只显示移动号码键盘(在现代浏览器中),你可以将输入限制为一个模式(即pattern="[0-9]{10}")。
其他回答
从MDN的文档<input>
如果type属性的值是text、email、search、password、tel或url,则此属性指定用户可以输入的最大字符数(Unicode码位);对于其他控件类型,它将被忽略。
因此maxlength在<input type="number">上被故意忽略。
根据你的需要,你可以像inon在他/她的回答中建议的那样使用min和max属性(注意:这只会定义一个受限的范围,而不是值的实际字符长度,尽管-9999到9999将覆盖所有0-4位数字),或者你可以使用常规文本输入,并使用新模式属性对字段强制验证:
<input type="text" pattern="\d*" maxlength="4">
输入类型文本和oninput事件与regex只接受数字为我工作。
<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
我最近尝试的绝对解决方案是:
<input class="class-name" placeholder="1234567" name="elementname" type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
我有这个问题在django形式。这就是我解题的代码。
HTML
<input type="tel" maxlength="6" oninput="this.value=this.value.replace(/[-]/g,'');"></input> <!-- I needed to remove the "-" sinc tell field accepts it. -->
Django形式
class TokenForm(forms.Form):
code = forms.CharField(
required=True,
label="Enter 6 digit confirmation code",
widget=forms.TextInput(
attrs={
"class": "form-control",
"placeholder": "Enter 6 digit code",
"type": "tel",
"maxlength":"6",
"oninput":"this.value=this.value.replace(/[-]/g,'');"
}
),
)
根据我的经验,人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。
正如其他注释所述,type="number"输入没有maxlength属性,而是有min和max属性。
要让字段限制可以插入的字符数量,同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max),您必须(至少目前)向该字段添加一个侦听器。
这是我过去使用的一个解决方案:http://codepen.io/wuori/pen/LNyYBM