对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?


当前回答

简单的解决方法,

输入滚动事件 通过键盘复制粘贴 通过鼠标复制粘贴 输入类型等情况 <输入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。

其他回答

另一种选择是为任何具有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>

我发现你不能使用任何onkeydown, onkeypress或onkeyup事件的完整解决方案,包括移动浏览器。顺便说一下,onkeypress已弃用,不再出现在chrome/opera的android(见:UI事件 W3C工作草案,2016年8月4日)。

我只使用oninput事件找到了一个解决方案。 你可能需要做额外的数字检查,如负号/正号或小数和千个分隔符等,但作为一个开始,以下应该足够了:

函数checkMaxLength(事件){ //准备恢复之前的值 如果这一点。oldValue === undefined) { 这一点。oldValue = this.defaultValue; } 如果(this.value。长度> this.maxLength) { //设置回前一个值 这一点。value = oldVal; } 其他{ //存储之前的值。 这一点。oldValue = this.value; //对+/-或。/等进行额外检查 //同时考虑合并'maxlength' //使用'min'和'max'来防止错误提交。 } }

我还建议将maxlength与min和max结合起来,以防止如上所述的错误提交。

啊。就像有人在实施过程中半途而废,以为没人会注意到。

不管出于什么原因,上面的答案没有使用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。

与type="number"一样,指定max而不是maxlength属性,这是可能的最大数目。如果是4位数,最大值应该是9999,5位数是99999,以此类推。

另外,如果你想确保它是一个正数,你可以设置min="0",以确保它是正数。

HTML输入

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });