如何在input type=number中设置最大长度？

Question

我有一个文本框。

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

但是我可以在文本框中输入任意数量的数字。

由于我将最大值设为999，我不希望发生这种情况。有人知道解决方法吗？我尝试了 ng-maxlength 和 maxlength，但都不起作用。

- vishnuprasad kv

---

您创建了一个文本字段并将其设置为最大值=999，但仍然可以输入111111111（即使不是有效的输入）。我想要阻止这种情况，但又不想阻止在文本字段中输入4位数的数字。 - vishnuprasad kv

使用正则表达式模式如下：^(\d){1,10}$ - Durgpal Singh

在这个Fiddle中，我设置了999的限制，但是你仍然可以输入任意多的数字。 - vishnuprasad kv

“min”和“max”用于验证目的，它们不能防止您在输入中编写无效数字。 - Fez Vrasta

你为什么在意呢？只要数据提交时最多只有3个字符，用户如何输入这3个字符由他们自己决定。 - RobG

Answer 1

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

有关详细信息，请 查看此链接。

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

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

- Reshma Reghunatha Panicker

---

当输入字符数达到10个时，我无法删除该数字（退格键无效）。 - vishnuprasad kv

将 onKeyDown 更改为 onKeyPress... 再次检查 - Reshma Reghunatha Panicker

[Firefox Quantum] 相同的问题出现了，无论是退格键还是其他键都不起作用。只能使用数字上下箭头进行更改。 [Chrome] 运行良好！ - bogdan.rusu

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeypress - Tomer

如果您正在使用React，您可能需要使用onKeyPress={(e) => { if (e.target.value.length >= 12) e.preventDefault() }}。 - Isaac Muniz

Answer 2

我的解决方法是使用onkeypress和max属性。例如，对于最大长度为999。

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

已在Chrome、Firefox和Edge中进行测试。

- Scorpionk

---

它能工作，但如果您输入加号和减号等运算符，它会破坏功能。 - Awoooooooooooooooooooo

Answer 3

试一试

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>

- byteC0de

Answer 4

尝试。

<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">

- mujuonly

---

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

Answer 5

这里有一个使用 JQuery 的 JSFiddle。

请提供您的输入。

<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;
}

})

- Jax Teller

---

这会限制最大值为900，并允许任何大小的负数。更好的做法是像 var v = this.value; if (v > 999) this.value = v.substr(0,2) 这样，再加上针对负数的额外逻辑（无论它们是什么）。 - RobG

是的，我的错，忘记了最小值，但是现在他可以用所有的答案轻松地修复它。 - Jax Teller

Answer 6

如果你限制单个字段

  <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}

- Hassan Tarique

---

它将数字限制在两位数以内。 - Hassan Tarique

Answer 7

如果您正在通过映射来映射多个数字文本字段，请按照以下方式操作。

     <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
         });
  }

- Hassan Tarique