对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
更相关的属性是min和max。
其他回答
简单的解决方法,
输入滚动事件 通过键盘复制粘贴 通过鼠标复制粘贴 输入类型等情况 <输入id = " maxLengthCheck " name = " maxLengthCheck " type = "数量" 一步= " 1 " min = " 0 " oninput = "。Value = this。取值为> 5 ?5: Math.abs(this.value)"/>
这是有条件的。值> 5,只需更新5与您的最大限制。
解释:
如果我们的输入数大于我们的极限更新输入值this。Math.abs(this.value) 否则就达到最大限度,也就是5。
<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" />
您可以指定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);
}
}
你可以像这样把所有这些组合起来:
<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />
<script>
// This is an old version, for a more recent version look at
// https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
function maxLengthCheck(object)
{
if (object.value.length > object.maxLength)
object.value = object.value.slice(0, object.maxLength)
}
</script>
更新: 您可能还希望防止输入任何非数字字符,因为object。Length对于数字输入来说是一个空字符串,因此它的长度为0。因此maxLengthCheck函数将不起作用。
解决方案: 看这个或这个例子。
演示-查看完整版本的代码在这里: http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/
更新2:下面是更新代码: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
更新3: 请注意,允许输入超过一个小数点可能会导致数值混乱。
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="3" />
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击