AngularJS를 사용하여 입력 값을 제한하려면 어떻게 해야 합니까?

AngularJS를 사용하여 입력 값을 제한하려면 어떻게 해야 합니까?

입력 내의 값을 4로 제한하고 4자리 값을 컨트롤러로 처리하는 방법을 찾고 있습니다.

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

항상 지시문을 작성할 수 있습니다.

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

하실 수 있습니다.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">

데모 바이올린

Angular를 사용할 필요가 없습니다.JS 디렉티브

good old standard html attribute maxlength 를 사용합니다.

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

저는 인정된 답변을 발판으로 삼았지만, 이것이 제가 생각해낸 것입니다.

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사용자가 제한을 초과하여 공백 공간을 추가하지 않도록 합니다.이 답변은 @tyme의 합성어입니다.JV의 답변과 이 블로그 투고는...https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

백스페이스와 삭제를 허용합니다.

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

다음 코드를 사용할 수 있습니다.

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

및 각도JS 코드:

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

대신 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으로 바뀝니다.

위의 지시(tyme의 답변)에 문제가 있기 때문에JV) 최대 길이를 한 번 입력하면 백스페이스에서도 다른 문자를 사용할 수 없습니다.즉, limit-to="4"이고 입력란에 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;
                    }
                });
            }
        }
    }]);

각도 재료에는 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=""/>

''는 을 쓸 수 있습니다.keypress이벤트. 단, 일부 오래된 브라우저에서는 이 이벤트가 트리거되지 않습니다.그렇기 때문에 브라우저 고유의 이벤트 제한에 의존하지 않도록 디렉티브를 작성했습니다.입력 상자의 텍스트 수를 제한하는 각도 지시문을 만들었습니다.

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

: 사법 usage :<input limit-to="3" ng-model="test"/>3번

Angular Js Material에서는 입력 필드를 "maxLimit"로 제한할 수 있습니다. 예를 들어 다음과 같이 b 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">

번호 변경 시 다음 작업을 수행합니다.

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

이렇게 하면 "숫자"가 항상 4자리로 제한됩니다.

나는 @Danilo Kobold가 말한 것을 반복하고 있다.

사용자가 숫자(0-9)만 입력할 수 있는지 확인해야 했습니다.['e' 또는 '.' 또는 '-'는 입력하지 않고 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/;

이 게시물에서 아이디어를 얻었습니다.

내가 누군가를 도왔길 바래.

그냥 사용하시면 됩니다.

ui-mask="9999"

속성으로 표시됩니다.

**

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

**

커스텀 디렉티브템플릿의 일부로 존재하는 입력 필드의 최대 길이를 제한하려면 이 디렉티브를 사용합니다.이것은 max-lent를 제한하기 위한 네이티브 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>

대신 이렇게 해 주세요.

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

"text" 유형을 사용한 후 maxlength를 사용하여 제한하고 num-only 옵션을 사용하여 숫자만 입력하도록 합니다.

언급URL : https://stackoverflow.com/questions/24701205/how-can-you-limit-the-value-from-input-using-angularjs