webentwicklung-frage-antwort-db.com.de

Wie kann der Eingabewert mit AngularJS begrenzt werden?

Ich suche nach Möglichkeiten, den Wert innerhalb der Eingabe auf 4 zu begrenzen und den 4-stelligen Wert an meinen Controller zu verarbeiten.

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

Kann immer eine Richtlinie dafür machen:

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

Sie können immer ng-minlength, ng-maxlength für die Länge der Zeichenkette und min, max für die Anzahl der Beschränkungen verwenden. Versuche dies

<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

14
Raghavendra

Ich habe die akzeptierte Antwort als Startpunkt verwendet, aber dazu habe ich gekommen.

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

verwendungszweck

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

Der Schlüssel ist, $ setViewValue () und $ render () zu verwenden, um die Änderungen einzustellen bzw. anzuzeigen. Dadurch wird sichergestellt, dass $ viewValue und $ modelValue korrekt sind und korrekt angezeigt werden. Sie möchten ngTrim auch auf false setzen, um zu verhindern, dass der Benutzer Leerzeichen über das Limit hinaus hinzufügt. Diese Antwort ist eine Verschmelzung der Antwort von @ tymeJV und dieses Blogposts ... https://justforchangesake.wordpress.com/2015/01/10/useful-angularjs-directives/

8
honkskillet

Wird es zulassen, dass Backspaces und Löschungen möglich sind.

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

Keine AngularJS-Direktive erforderlich.

Verwenden Sie einfach das gute alte Standard-HTML-Attribut maxlength .

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

sie können diesen Code verwenden:

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

und AngularJS-Code:

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

Wir können stattdessen ng-value verwenden: 

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

In HTML-Code:

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

Dies prüft den Wert und wenn er größer als 60 ist, wird der Wert durch 0 ersetzt. 

4
PetsonJ

Da gibt es ein Problem in der obigen Direktive (Antwort von TymeJV). Wenn Sie die maximale Länge einmal eingeben, werden keine anderen Zeichen akzeptiert, auch nicht die Rücktaste. Wenn also limit-to = "4" ist und Sie 4 Zeichen in das Eingabefeld eingegeben haben, können Sie es nicht löschen. SO Hier ist die aktualisierte Antwort.

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

Wir können die Direktive schreiben, um das Ereignis keypress anzuhören. Bei einigen alten Browsern wird dieses Ereignis jedoch nicht ausgelöst. Aus diesem Grund habe ich eine Direktive so erstellt, dass es keine Abhängigkeit von browserspezifischen Ereignisbeschränkungen gibt. Ich habe eine Winkeldirektive erstellt, um die Anzahl der Texte im Eingabefeld zu begrenzen.

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

Verwendung: <input limit-to="3" ng-model="test"/> würde nur 3 Zeichen im Eingabefeld zulassen.

2

Führen Sie diesen Vorgang bei jeder Änderung der Nummer aus:

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

Dadurch wird die "Anzahl" immer auf 4 Ziffern begrenzt.

1
user3711629

Ich wiederhole, was @Danilo Kobold gesagt hat. 

Ich musste sicherstellen, dass Benutzer nur Zahlen eingeben können (0-9) [Ohne 'e' oder '.' oder '-'] und ein Limit von nur 4 Werten. 

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

Wenn Sie nur Limit verwenden möchten, verwenden Sie 

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

Sie können weitere Schlüssel hinzufügen, wenn Sie die Ausschlussvariable wie folgt verwenden möchten:

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

Hab eine Idee von diesem Post

Hoffe ich habe jemandem geholfen.

1
Prashanth VG

Winkelmaterial hat eine Direktive mdMaxlength. Wenn Sie die Eingabe auf diese Länge abschneiden möchten, können Sie diese Direktive verwenden:

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

Verwendungszweck: 

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

Sie können einfach verwenden 

ui-mask="9999"

als Attribut in Ihrer Sicht.

0
user3690341

In Angular Js Material können wir das Eingabefeld auf "maxLimit" begrenzen. Beispielsweise benötigen wir eine Begrenzung des Eingabetextes, wenn das Zeichen 60 Zeichen sein sollte:

maxLimit ='60'

vollständiger Code:

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

Verwenden Sie diese Anweisung, wenn Sie die maximale Länge für ein Eingabefeld einschränken möchten, das als Teil einer benutzerdefinierten Richtlinienvorlage vorhanden ist. Dies ist die native html5-Methode zur Beschränkung von max-lenth. Dadurch wird auch der Fall zum Kopieren und Einfügen behandelt, um die maximale Länge beim Einfügen einzuschränken.

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>

0
Deepak Acharya

**

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

**

0
suresh manda