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


当前回答

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

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

您可以指定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); 
    }
}

我发现你不能使用任何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结合起来,以防止如上所述的错误提交。

这可能会帮助到某些人。

用一点javascript,你可以搜索所有的datetime-local输入,搜索用户试图输入的年份,大于100年后:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(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: 请注意,允许输入超过一个小数点可能会导致数值混乱。