对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
假设您希望允许的最大值为1000—可以是键入的,也可以是使用旋转器的。
你可以使用以下方法限制微调器值: Type ="number" min="0" max="1000"
并且用javascript限制键盘输入的内容: onkeyup =“如果(方法(this.value) > 1000){。值= 1000;返回错误;}”
<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
其他回答
如果有人在React中挣扎,我发现最简单的解决方案是使用onChange函数,像这样:
const [amount, setAmount] = useState("");
return(
<input onChange={(e) => {
setAmount(e.target.value);
if (e.target.value.length > 4) {
setAmount(e.target.value.slice(0, 4));
}
}} value={amount}/>)
所以这基本上做的是,它获取输入的值,如果输入值长度大于4,它就会切片它之后的所有数字,所以你只得到前4个数字(当然,你可以通过改变代码中的所有4来改变你可以输入的数字数量)。我希望这能帮助到那些正在为这个问题而挣扎的人。如果你想了解切片方法的功能,可以点击这里
更相关的属性是min和max。
您可以指定min和max属性,这将只允许在特定范围内输入。
<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">
然而,这只适用于旋转控制按钮。尽管用户可以输入大于允许的最大值的数字,但表单将不会提交。
截图来自Chrome 15
你可以在JavaScript中使用HTML5的oninput事件来限制字符的数量:
myInput.oninput = function () {
if (this.value.length > 4) {
this.value = this.value.slice(0,4);
}
}
或者如果你的最大值是99,最小值是0,你可以把它加到输入元素中(你的值会被你的最大值重写)。
<input type="number" min="0" max="99"
onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">
然后(如果你想),你可以检查输入的是否真的数字
梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。
下面的代码停在2,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击