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"/>
当前回答
您可以使用min和max属性。
下面的代码做同样的事情:
<输入类型=“数字” 最小=“-999” 最大=“9999”/>
其他回答
试试这个,
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
我有这个问题在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,'');"
}
),
)
根据Neha Jain上面的回答,我只是把下面的代码添加到公共区域
$(':input[type="number"]').on('input', function() {
if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);
});
然后你可以像文本类型字段一样使用maxlength="4"。
如果你想在React函数组件中实现它,或者不使用“this”,这里有一种方法。
<input onInput={handleOnInput}/>
const handleOnInput = (e) => {
let maxNum = 4;
if (e.target.value.length > maxNum) {
e.target.value = e.target.value.slice(0, maxNum);
}
};
根据我的经验,人们问为什么maxlength被忽略的大多数问题是因为允许用户输入超过“允许”的字符数量。
正如其他注释所述,type="number"输入没有maxlength属性,而是有min和max属性。
要让字段限制可以插入的字符数量,同时允许用户在提交表单之前意识到这一点(否则浏览器应该识别值> max),您必须(至少目前)向该字段添加一个侦听器。
这是我过去使用的一个解决方案:http://codepen.io/wuori/pen/LNyYBM