如何在输入字段中只输入 10 个数字？答案

【问题标题】：How to enter only 10 numbers in input field?如何在输入字段中只输入 10 个数字？
【发布时间】：2015-07-20 13:56:10
【问题描述】：

好的，我有输入字段：

<input type="text" class="form-control" ng-model="ticketPin">

我想让用户只输入数字，10 位长(1234567890)

我试过type="number"，但不是这样。任何建议

编辑：所以我可以将 maxlength 用于 10 位长，但是只限制数字呢？编辑：模式 ="[0-9]*" 不适合我

【问题讨论】：

重复 - stackoverflow.com/questions/113376/character-limit-in-html

标签： angularjs html

【解决方案1】：

你需要使用maxlength属性

<input type="text" class="form-control" ng-model="ticketPin" maxlength="10">

【讨论】：

只限制数字怎么样？
如果您想确保输入准确的 10 个数字，您需要使用模式 pattern="[0-9]*" 并另外使用 minlength="10"。
嗯...它不适合我...我仍然可以输入字母
它对我很有效。你能分享我更新的输入元素吗

【解决方案2】：

您可以这样做以确保输入的值为数字且不超过 10 位。

<input type="text" class="form-control" ng-model="ticketPin" pattern="[0-9]*" maxlength="10">

【讨论】：

【解决方案3】：

试试这个插件http://candreoliveira.github.io/bower_components/angular-mask/examples/index.html#/

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="//rawgit.com/candreoliveira/ngMask/master/dist/ngMask.min.js"></script>

  
</head>
<body ng-app="selectExample">
  <script>
    angular.module('selectExample', ['ngMask'])
  </script>
  <div>
     <input type='text' mask-clean='true' ng-model='ticketPin' mask='9999999999' restrict="reject" clean="true" />
  </div>
   {{ticketPin}}
  </body>

</html>

【讨论】：

【解决方案4】：

为确保用户只输入数字，您可以使用pattern 属性：

<input type="text" class="form-control" ng-model="ticketPin" pattern="[0-9]{10}">

此技术不适用于所有浏览器，请参阅http://caniuse.com/#feat=input-pattern

验证只会在浏览器中执行，不要忘记在服务器上再次验证数据。

【讨论】：

这可行，但请注意并非所有移动设备都足够智能以触发数字键盘
是的。试试 type="number" 而不是 type="text"。

【解决方案5】：

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;

}

 <input id="Phone" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)" type="number" max = "9999999999" placeholder="Phone Number" />

<script>
  function maxLengthCheck(object) {
    if (object.value.length > object.max.length)
      object.value = object.value.slice(0, object.max.length)
  }
    
  function isNumeric (evt) {
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode (key);
    var regex = /[0-9]|\./;
    if ( !regex.test(key) ) {
      theEvent.returnValue = false;
      if(theEvent.preventDefault) theEvent.preventDefault();
    }
  }
</script>

jsfiddle在这里：

https://jsfiddle.net/DharaPatel0621/mo9qgk31/

【讨论】：