对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
你可以将它指定为文本,但要添加只匹配数字的pettern:
<input type="text" pattern="\d*" maxlength="2">
它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。
其他回答
设置数字输入的maxlength的一个简单方法是:
<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
<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" />
您可以添加一个max属性,该属性将指定您可以插入的最大数字
<input type="number" max="999" />
如果你同时添加Max和min值,你可以指定允许值的范围:
<input type="number" min="1" max="999" />
以上仍然不会阻止用户手动输入指定范围之外的值。相反,他会看到一个弹出窗口,告诉他在提交表单时输入一个范围内的值,如下面的截图所示:
这很简单,用一些javascript你可以模拟一个maxlength,看看:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="3" />
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击