对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
正如其他人所说,min/max与maxlength不同,因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。为了真正模拟maxlength属性,你可以在紧要关头做这样的事情(这相当于maxlength="16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
其他回答
你可以将它指定为文本,但要添加只匹配数字的pettern:
<input type="text" pattern="\d*" maxlength="2">
它非常完美,而且在移动设备上(在iOS 8和Android上进行了测试),数字键盘也会弹出。
最大长度将不能与<input type="number"工作,我知道的最好的方法是使用oninput事件限制最大长度。请参阅下面的简单实现代码。
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
啊。就像有人在实施过程中半途而废,以为没人会注意到。
不管出于什么原因,上面的答案没有使用min和max属性。这个jQuery完成它:
$('input[type="number"]').on('input change keyup paste', function () {
if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});
如果你是那种“jQuery-is-the-devil”类型,它也可能作为一个命名函数“oninput”使用jQuery。
更相关的属性是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等等?
- 输入触发器按钮单击