Question

我正在寻找将输入内的值限制为4并将4位数值处理到我的控制器的方法。

 <input type="number" class="form-control input-lg"
 ng-model="search.main" placeholder="enter first 4 digits: 09XX">
                {{ search.main | limitTo:4}}

Answer 1

总是可以为它制定指令：

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keypress", function(e) {
                if (this.value.length == limit) e.preventDefault();
            });
        }
    }
}]);

<input limit-to="4" type="number" class="form-control input-lg" ng-model="search.main" placeholder="enter first 4 digits: 09XX">

Answer 2

您始终可以使用ng-minlength，ng-maxlength表示字符串长度，min, max表示数字限制。试试这个

<input type="number" 
       name="input"
       class="form-control input-lg"
       ng-model="search.main" 
       placeholder="enter first 4 digits: 09XX"
       ng-minlength="1" 
       ng-maxlength="4" 
       min="1" 
       max="9999">

<强> DEMO FIDDLE

Answer 3

我使用接受的答案作为启动点，但这就是我想出来的。

angular.module('beastTimerApp')
  .directive('awLimitLength', function () {
  return {
    restrict: "A",
    require: 'ngModel',
    link: function (scope, element, attrs, ngModel) {
      attrs.$set("ngTrim", "false");
      var limitLength = parseInt(attrs.awLimitLength, 10);// console.log(attrs);
      scope.$watch(attrs.ngModel, function(newValue) {
        if(ngModel.$viewValue.length>limitLength){
          ngModel.$setViewValue( ngModel.$viewValue.substring(0, limitLength ) );
          ngModel.$render();
        }
      });
    }
  };
});

使用

<input name="name" type="text"  ng-model="nameVar" aw-limit-length="10"/>

关键是使用$ setViewValue（）和$ render（）分别设置和显示更改。这将确保$ viewValue和$ modelValue正确并正确显示。您还希望将ngTrim设置为false，以防止用户添加超出限制的空格。这个答案是@ tymeJV的答案和这篇博文的合并...... https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

Answer 4

是否允许退格和删除。

app.directive("limitTo", [function() {
    return {
    restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            angular.element(elem).on("keydown", function() {
                if(event.keyCode > 47 && event.keyCode < 127) {
                    if (this.value.length == limit) 
                        return false;
                }   
            }); 
        }
    }
}]);

Answer 5

无需使用AngularJS指令。

只需使用旧的标准html属性 maxlength 。

<input type="text" maxlength="30" />

Answer 6

您可以使用此代码：

<input type="number" class="form-control input-lg" 
       ng-model="search.main" 
       ng-keypress="limitKeypress($event,search.main,4)"
       placeholder="enter first 4 digits: 09XX">

和AngularJS代码：

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

Answer 7

我们可以使用ng-value代替：

ng-value="(minutes > 60 ? minutes = 0 : minutes)"

在html代码中：

<input type="text" class="form-control" ng-model="minutes" ng-maxlength="2" ng-pattern="/^[0-9]*$/" ng-value="(minutes > 60 ? minutes = 0 : minutes)"/>

这将检查值，如果值大于60，则将值替换为0.

Answer 8

因为上述指令存在问题（tymeJV的回答）。如果输入一次最大长度，则即使退格也不接受任何其他字符。那就是limit-to =＆＃34; 4＆＃34;如果您在输入框中输入了4个字符，则无法删除它。这是更新后的答案。

app.directive("limitTo", [function () {
        return {
            restrict: "A",
            link: function (scope, elem, attrs) {
                var limit = parseInt(attrs.limitTo);
                elem.bind('keypress', function (e) {
//                    console.log(e.charCode)
                    if (elem[0].value.length >= limit) {
                        console.log(e.charCode)
                        e.preventDefault();
                        return false;
                    }
                });
            }
        }
    }]);

Answer 9

我们可以编写指令来收听keypress事件。但对于某些旧浏览器，此事件不会被触发。这就是为什么我以这样一种方式创建一个指令，即不依赖于浏览器特定的事件限制。我创建了一个angular指令来限制输入框中的文本数量。

'use strict';
angular.module("appName")
.directive("limitTo", [function() {
return {
restrict: "A",
require: "ngModel",
link: function(scope, elem, attrs, ctrl) {
    var limit = parseInt(attrs.limitTo);
    ctrl.$parsers.push(function (value) {
        if (value.length > limit){
            value = value.substr(0, limit);
            ctrl.$setViewValue(value);
            ctrl.$render();
        }
        return value;
    });
 }
}}]);

用法：<input limit-to="3" ng-model="test"/>在输入框中只允许使用3个字符。

Answer 10

在Angular Js Material中我们可以通过“maxLimit”限制输入字段，例如我们需要输入文本的限制应该是60个字符：

maxLimit ='60'

完整代码：

<form-input-field flex
                  class="input-style-1"
                    title="Quick response tag title"
                    placeholder="Write a catchy title to help users get more information on the service card"
                    form-name="parent.qrtForm"
                    show-error="showError"
                    name="title"
                    maxLength="65"
                    text-limit="65"
                    required="true"
                    ng-model="newQrt.tagName">

Answer 11

对数字的任何更改运行此操作：

var log = Math.log(number) / Math.log(10);
if (log >= 4)
   number = Math.floor(number / Math.pow(10, Math.ceil(log - 4)));

这将始终将“数字”限制为4位数。

Answer 12

Angular材质有一个指令mdMaxlength，如果你想以这个长度切断输入，你可以使用这个指令：

 app.directive("forceMaxlength", [function() {
   return {
     restrict: "A",
     link: function(scope, elem, attrs) {
       var limit = parseInt(attrs.mdMaxlength);
       angular.element(elem).on("keydown", function() {
         if (this.value.length >= limit) {
           this.value = this.value.substr(0,limit-1);
           return false;
         }
       });
     }
   }
 }]);

用法：

<input type="text" md-maxlength="30" force-maxlength=""/>

Answer 13

我重申@Danilo Kobold所说的话。

我必须确保用户只能输入数字（0-9）[没有＆＃39; e＆＃39;或＆＃39;。＆＃39;或者＆＃39; - ＆＃39;]以及仅限4个值。

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (event.keyCode > 47 && event.keyCode < 58) {
                    if (this.value.length == limit) e.preventDefault();
                } else if (!exclude.test(event.key)) {
                    e.preventDefault();
                }
            });
        }
    }
}]);

如果您只想使用限制，请使用

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (!exclude.test(event.key)) {
                    if (this.value.length == limit) e.preventDefault();
                }
            });
        }
    }
}]);

如果您想要排除变量，可以添加更多密钥，如下所示：

var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;

从这个post

得知

希望我能帮助别人。

Answer 14

你可以使用

ui-mask="9999"

作为视图中的属性。

Answer 15

**

app.directive("limitTo", [function() {
    return {
        restrict: "A",
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.limitTo);
            var exclude = /Backspace|Enter/;
            angular.element(elem).on("keydown", function(e) {
                if (e.keyCode > 47 && e.keyCode < 58) {
                    if (this.value.length == limit) e.preventDefault();
                } else if (!exclude.test(e.key)) {
                    e.preventDefault();
                }
            });
        }
    }
}]);

**

Answer 16

如果要限制作为自定义指令模板的一部分出现的输入字段的最大长度，请使用此指令。这是限制max-lenth的本地html5方法。这样也可以处理复制粘贴的情况，以限制粘贴时的最大长度。

app.directive('inputWrapper', function() {
    return {
        restrict: 'A',
        template: "<input type='text'/>"
    };
});

app.directive('maxInputLength', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            var limit = parseInt(attrs.maxInputLength);
            angular.element(elem).find('input').attr('maxlength', limit);
        }
    };
});

<input-wrapper max-input-lenth="35"></input-wrapper>

如何使用AngularJS限制输入值？

16 个答案: