对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />
或者如果你想什么都不能输入
<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
其他回答
如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。
Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。
你可以将它指定为文本,但要添加只匹配数字的pettern:
<input type="text" pattern="\d*" maxlength="2">
它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。
梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。
下面的代码停在2,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
更相关的属性是min和max。
下面是使用maxlength的最简单的解决方案:
<form>
<input class="form-control" id="code_pin" oninput="if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" type="number" maxlength="4">
</form>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击