maxlenght 或 ng-maxlength 似乎都不起作用答案

【问题标题】：neither maxlenght or ng-maxlength seems to be working angularjsmaxlenght 或 ng-maxlength 似乎都不起作用
【发布时间】：2018-09-25 19:19:32
【问题描述】：

我的 html 文件中有以下输入：

 <input name="password" 
        id="newPasswordConfirmation" 
        ng-model="newPasswordConfirmation" 
        type="number" 
        inputmode="numeric" 
        placeholder="" 
        required 
        minlength="8" 
        maxlength="8" 
        autocomplete="off" 
        ng-maxlength="8" 
        autocorrect="off" 
        autocapitalize="off" 
        style="-webkit-text-security: disc; text-security: disc;">

我想将输入限制为 8 个 algarisms，但是当我在移动设备 (android) 上输入时，我可以继续输入超过 8 个 algarisms。为什么这不起作用，您如何进行此限制？

【问题讨论】：

maxlength not working in html form input field with bootstrap的可能重复
maxlength 仅适用于<input> 类型的文本、电子邮件、搜索、密码、电话或网址。但是您可以创建一个指令，在数字输入上模仿 maxlength ...

标签： javascript html angularjs

【解决方案1】：

如 cmets 中所述，maxlength 不适用于数字输入。来自MDN：

maxlength：如果type属性的值为text、email、search、password、 tel 或 url，此属性指定最大字符数（在 UTF-16 代码单元中）用户可以输入的。对于其他控制类型，它被忽略。

这是一个你可以使用的小指令：

angular.module('myApp').directive('maxLength', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var maxLength = attrs.maxLength || false;
      if (maxLength) element.on('keydown keypress keyup paste propertychange', function(e) {
        if (element[0].value.length >= maxLength - 1) {
          element[0].value = element[0].value.slice(0, maxLength)
        }
      })
    }
  }
});

<input type="number" max-length="8">

【讨论】：

我意识到将类型更改为文本但保持输入模式数字也可以，所以也许不需要该指令。
@AnaSequeira，请注意 inputmode 是关于要显示哪个虚拟键盘，即它实际上并没有阻止该字段接受字母。它对带有心理键盘的桌面浏览器没有影响。也就是说，如果浏览器首先支持inputmode。 inputmode 不再包含在规范中，标记为已过时。见developer.mozilla.org/en-US/docs/Web/HTML/Element/input

【解决方案2】：

Demo Fiddle

   <div ng-app="App" ng-controller="Ctrl">
       <input type="text"
           ng-model="model" 
           ng-keypress="limitKeypress($event, model, 8)"
           placeholder="enter first 8 digits">
    </div>

    angular.module('App', []).controller('Ctrl', Ctrl);

    function Ctrl($scope) {
        $scope.model = 'test'

        $scope.limitKeypress = function ($event, value, maxLength) {
            if (value != undefined && value.toString().length >= maxLength) {
                $event.preventDefault();
            }
        }

    }
    Ctrl.$inject = ['$scope'];

【讨论】：