对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
你可以像这样把所有这些组合起来:
<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: 请注意,允许输入超过一个小数点可能会导致数值混乱。
其他回答
假设您希望允许的最大值为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; }">
这很简单,用一些javascript你可以模拟一个maxlength,看看:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
啊。就像有人在实施过程中半途而废,以为没人会注意到。
不管出于什么原因,上面的答案没有使用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。
//对于Angular,我添加了如下代码片段。 < div ng-app = " " > < >形式 输入数字:<input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"> > < /形式 <h1>输入:{{number}}</h1> < / div >
如果你使用"onkeypress"事件,那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求,不允许用户进入特定的限制后,看看这段代码,并尝试一次。
另一种选择是为任何具有maxlength属性的东西添加一个侦听器,并将切片值添加到其中。假设用户不想在与输入相关的每个事件中使用函数。下面是一个代码片段。忽略CSS和HTML代码,JavaScript才是最重要的。
// Reusable Function to Enforce MaxLength function enforce_maxlength(event) { var t = event.target; if (t.hasAttribute('maxlength')) { t.value = t.value.slice(0, t.getAttribute('maxlength')); } } // Global Listener for anything with an maxlength attribute. // I put the listener on the body, put it on whatever. document.body.addEventListener('input', enforce_maxlength); label { margin: 10px; font-size: 16px; display: block } input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px } span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 } <label for="test_input">Text Input</label> <input id="test_input" type="text" maxlength="5"/> <span>set to 5 maxlength</span> <br> <label for="test_input">Number Input</label> <input id="test_input" type="number" min="0" max="99" maxlength="2"/> <span>set to 2 maxlength, min 0 and max 99</span>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击