如何在输入类型=数字中设置最大长度？ [复制]答案

【问题标题】：How to set maximum length in input type=number? [duplicate]如何在输入类型=数字中设置最大长度？ [复制]
【发布时间】：2016-05-31 06:29:53
【问题描述】：

我有一个文本字段。

<input type="number" min="0" max="999">

但我可以在文本框中输入尽可能多的数字。

当我设置 max=999 时，我不希望这种情况发生。有谁知道这个的解决方案？我尝试过ng-maxlength 和maxlength 但不起作用。

【问题讨论】：

您到底需要什么？你的问题不清楚。
你创建一个文本字段并给出 max=999，你仍然可以输入 111111111（即使不是有效的条目）我想阻止它，我不想阻止输入 4 位数文本字段中的数字
像这样使用正则表达式模式。 ^(\d){1,10}$
你能给我们看一些可验证的例子吗？
min 和 max 用于验证目的，它们不会阻止您在输入中写入无效数字。

标签： javascript html angularjs

【解决方案1】：

max 属性指定我们可以指定的最大可能值。

更多详情see this link

我认为以下内容会对您有所帮助，

//maxlength="10"
<input type="number" onKeyPress="if(this.value.length==10) return false;" />

【讨论】：

当它达到 10 个字符时，我无法删除数字（退格不起作用）
已将 onKeyDown 更改为 onKeyPress... 再次检查
[Firefox Quantum]同样的事情正在发生，退格键或其他键都不起作用。它只能通过数字的向上或向下箭头进行更改。 [Chrome] 运行良好！
developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/…

【解决方案2】：

试试这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  var oldNumber = 0;
  $scope.numberChanged = function(number){
    if(number<=999){
      oldNumber = number;
    }
    return oldNumber;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div  ng-app="mainApp" ng-controller="mainCtrl">
  <input type="number" min="0" max="999" ng-model="jimNum" ng-change="jimNum = numberChanged(jimNum);">
</div>

【讨论】：

【解决方案3】：

试试

<input type="number" min="0" max="999" 
   onKeyUp="if(this.value>999){this.value='999';}else if(this.value<0){this.value='0';}"
id="yourid">

【讨论】：

请注意，如果用户使用字段控件调整值，他们可能不会调度任何键盘事件，因此不会调用 onkeyup 侦听器。

【解决方案4】：

有JSFiddle，使用JQuery。

您的意见

<input type="number" id="num">

脚本：

$("#num").keypress( function(e) {
    var current_val = $(this).val();
    var typing_char = String.fromCharCode(e.which);
if (parseFloat(current_val + "" +typing_char) > 900) {
    return false;
}

})

【讨论】：

这将最大值限制为 900，并允许任何大小的负数。更好的是像var v = this.value; if (v > 999) this.value = v.substr(0,2) 这样的负数附加逻辑（无论它们是什么）。
是的，我的错，忘记了 min val，但他现在可以通过所有答案轻松修复它。

【解决方案5】：

如果你限制单个字段

  <TextField type="number"
    className="text-field-amount"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
    min={0}

【讨论】：

限制数字最多为 2 位

【解决方案6】：

如果您通过地图映射多个数字文本字段，则这样做

     <TextField
                      key={key}
                      label={row.q_desc}
                      type="number"
                      onChange={this.onChange}
                      onInput={this.onInput}

                    />

    onInput= event => {
    event.preventDefault();

    debugger;
    var textField_name = this.state.input_Name;
    if (textField_name == "Zip") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 4);
    }

    if (textField_name == "Social Security") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 9);
    }
    if (textField_name == "Phone") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 10);
    }
  };



 onChange(e) {
          debugger;

         this.setState({
            input_Name: e.target.name
         });
  }

【讨论】：

【解决方案7】：

对我有用的解决方案是将 onkeypress 与 max 属性一起使用。例如最大长度为 999

&lt;input type="number" max="999" onkeypress="if (this.value.length &gt; 2) return false;"/&gt;

在 Chrome、Firefox 和 Edge 中测试。

【讨论】：