anglejs: Ermöglicht die Eingabe von Zahlen in ein Textfeld

68

In anglejs gibt es alle Funktionen, mit denen nur Zahlen in ein Textfeld wie eingegeben werden können

Ali Hasan
quelle
10
benutze <input ng-pattern = "\ d *" ... />
Tamil Selvan C
es ist für validation.works auf Vorlage von form.i Benutzer hat noch keine anderen Werte als Anzahl / integer..like dieses eingeben , um nicht zulassen wollen texotela.co.uk/code/jquery/numeric
Ali Hasan

Antworten:

26

Diese Funktionalität genau das, was Sie brauchen. http://docs.angularjs.org/api/ng.directive:input.number

BEARBEITEN:

Sie können das jquery-Plugin in eine Direktive einbinden. Ich habe hier ein Beispiel erstellt: http://jsfiddle.net/anazimok/jTJCF/

HTML:

<div ng-app="myApp">
    <div>
        <input type="text" min="0" max="99" number-mask="" ng-model="message">
            <button ng-click="handleClick()">Broadcast</button>
    </div>

</div>

CSS:

.ng-invalid {
    border: 1px solid red;
}

JS:

// declare a module
var app = angular.module('myApp', []);

app.directive('numberMask', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).numeric();
        }
    }
});
Anazimok
quelle
16
Nicht ganz das OP verlangt. Ihre Lösung bietet eine Eingabevalidierung (dh zeigt einen Fehler an, wenn eine Nichtnummer erkannt wird), aber Benutzer können weiterhin eine Nichtnummer in das Textfeld eingeben.
Tamakisquare
1
@AliHasan Dies sollte nicht die richtige Antwort sein, da es die Frage nicht beantwortet.
Bucket
65

Dieser Code zeigt das Beispiel, wie die Eingabe von nichtstelligen Symbolen verhindert wird.

angular.module('app').
  directive('onlyDigits', function () {

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue == undefined) return '';
                var transformedInput = inputValue.replace(/[^0-9]/g, '');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
});
Anton
quelle
1
Danke dafür. Ich habe das Strippen ohne Ziffern vereinfacht und einen Test geschrieben: gist.github.com/henrik/769d49136744ddcaa1dc Zum Zeitpunkt des Schreibens ist der Code JS, aber der Test ist CoffeeScript. Bald werden beide CoffeeScript sein, denke ich.
Henrik N
Durch zweimaliges Tippen auf eine Buchstabentaste
schlägt
7
Wie Blowsie bemerkt, funktioniert dieser Code nicht in allen Fällen. Hier ist eine funktionierende jsfiddle, die ich versuche, diese Antwort zu aktualisieren, um sie zu verwenden: jsfiddle.net/thomporter/DwKZh
Ryan Langton
1
Die Direktive sollte mit ng-trim = false verwendet werden, wenn Sie die Eingabe von Leerzeichen explizit deaktivieren möchten
Ewigkeit
Die Benutzer können Leerzeichen eingeben. Fügen Sie attrs.$set('ngTrim', "false");vor dem Parser für Whitespaces zu verhindern.
Ahmad Payan
42

HTML

 <input type="text" name="number" only-digits>

// Gib einfach 123 ein

  .directive('onlyDigits', function () {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function (scope, element, attr, ctrl) {
        function inputValue(val) {
          if (val) {
            var digits = val.replace(/[^0-9]/g, '');

            if (digits !== val) {
              ctrl.$setViewValue(digits);
              ctrl.$render();
            }
            return parseInt(digits,10);
          }
          return undefined;
        }            
        ctrl.$parsers.push(inputValue);
      }
    };
});

// Typ: 123 oder 123.45

 .directive('onlyDigits', function () {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function (scope, element, attr, ctrl) {
        function inputValue(val) {
          if (val) {
            var digits = val.replace(/[^0-9.]/g, '');

            if (digits.split('.').length > 2) {
              digits = digits.substring(0, digits.length - 1);
            }

            if (digits !== val) {
              ctrl.$setViewValue(digits);
              ctrl.$render();
            }
            return parseFloat(digits);
          }
          return undefined;
        }            
        ctrl.$parsers.push(inputValue);
      }
    };
 });
Mein Mai
quelle
2
In Ihrem zweiten Beispiel (// Typ: 123 oder 123.45) können mehrere Dezimalstellen eingegeben werden, z. B. 11.22..33 ..... 444 wird als gültig zurückgegeben.
Paul McClean
2
Ich denke, wir können damit umgehen, wenn (digits.split ('.'). Length> 2) digits = digits.substring (0, digits.length - 1);
Matt
1
Warum ist der Code in AngularJS so lang, wenn er in normalem Javascript für dieselbe Anforderung einfach ist?
Kittu
Wie kann man dies auf nur 2 Stellen beschränken?
Bharath
@Bharath für nur 2 Dezimalstellen einschränken -> if (digits.split ('.'). Length> 1) {digits = digits.substring (0, digits.indexOf ('.') + 3); }
Aravinthan K
38

Ich habe gerade ng-keypress in der Direktive für meine Eingabe verwendet.

HTML:

<input type="text" ng-keypress="filterValue($event)"/>

JS:

$scope.filterValue = function($event){
        if(isNaN(String.fromCharCode($event.keyCode))){
            $event.preventDefault();
        }
};
Samnau
quelle
2
Obwohl dies nicht wirklich "der Winkel" ist, scheint es eine relativ sichere Option zu sein, um Benutzereingaben zu verhindern
Blowsie
4
Dies scheint sehr einfach zu sein, obwohl der nicht eckige Weg einige aufhalten könnte, hat mir dieser Ansatz definitiv gefallen. Musste 2 andere Fälle hinzufügen, die allerdings erlaubt sein mussten, event.which === 8 und event.which === 46 (für Rücktaste bzw. Löschen)
Markiv
Schöne Lösung! Ich habe den @ Markiv-Kommentar verwendet, um Ihren Code in einer neuen Antwort zu verbessern , die das Bearbeiten, Senden und Navigieren ermöglicht.
Leopoldo Sanczyk
Diese Lösung hat mir gefallen, und obwohl der Wert gekürzt wurde => Ich habe die Bedingung ein wenig geändert, um das Drücken der Leertaste zu verhindern: if (isNaN (String.fromCharCode ($ event.keyCode)) || $ event.keyCode === 32 )
Dimi
Das Tastendruckereignis ist veraltet. Einige Browser (insbesondere Chrome) unterstützen es nicht. Das Keydown-Ereignis ist ebenfalls faul - auf einigen Geräten, Nexus4, werden keine korrekten Schlüsselcodes gemeldet. Der einzige wirkliche Weg, dies zu tun (afaik), besteht darin, keine Zeichen zu verwenden, sondern den tatsächlichen wirklichen Text.
Erti-Chris Eelmaa
21

Dies ist der einfachste und schnellste Weg, um nur die Zahleneingabe zuzulassen.

<input type="text" id="cardno" placeholder="Enter a Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required>

Vielen Dank

Sijan Gurung
quelle
Wenn du das in eine Direktive setzen
könntest, ist
1
Rücktaste und Löschen funktionieren auch nicht -) Zusätzliche Überprüfung
erforderlich
2
Die Frage ist, nur die Eingabe von Zahlen zuzulassen, wenn Sie mehr als das wollen. Dann kann es natürlich entsprechend angepasst werden. Dies ist also nur ein Vorschlag, keine konkrete Antwort auf alle Probleme.
Sijan Gurung
Ich denke, das ist der Weg des Schicksals
Richard Aguirre
7

Um ein wenig auf Antons Antwort aufzubauen -

angular.module("app").directive("onlyDigits", function ()
{
    return {
        restrict: 'EA',
        require: '?ngModel',
        scope:{
            allowDecimal: '@',
            allowNegative: '@',
            minNum: '@',
            maxNum: '@'
        },

        link: function (scope, element, attrs, ngModel)
        {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue)
            {
                var decimalFound = false;
                var digits = inputValue.split('').filter(function (s,i)
                {
                    var b = (!isNaN(s) && s != ' ');
                    if (!b && attrs.allowDecimal && attrs.allowDecimal == "true")
                    {
                        if (s == "." && decimalFound == false)
                        {
                            decimalFound = true;
                            b = true;
                        }
                    }
                    if (!b && attrs.allowNegative && attrs.allowNegative == "true")
                    {
                        b = (s == '-' && i == 0);
                    }

                    return b;
                }).join('');
                if (attrs.maxNum && !isNaN(attrs.maxNum) && parseFloat(digits) > parseFloat(attrs.maxNum))
                {
                    digits = attrs.maxNum;
                }
                if (attrs.minNum && !isNaN(attrs.minNum) && parseFloat(digits) < parseFloat(attrs.minNum))
                {
                    digits = attrs.minNum;
                }
                ngModel.$viewValue = digits;
                ngModel.$render();

                return digits;
            });
        }
    };
});
Craig
quelle
1
Anstelle von ngModel.$viewValue = digitssollten Sie verwenden, ngModel.$setViewValue(digits)damit es den Rest der ngModelController- und ngForm-Hooks trifft. Ich brauchte dies, da es ein Pflichtfeld war und als ich einen Buchstaben eingab (der nicht angezeigt wurde), wurde das Formular als gültig markiert - falsch.
Chaz
Das Problem mit dieser Anweisung ist, wenn Sie eine legale Nummer eingeben und versehentlich einen Buchstaben eingeben, wird Ihr Feld entfernt.
Orikoko
7

Meine Lösung akzeptiert Kopieren & Einfügen und speichere die Position des Carets. Es wird für die Produktkosten verwendet und erlaubt daher nur positive Dezimalwerte. Kann Refactor sehr einfach sein, um negative oder nur ganzzahlige Ziffern zuzulassen.

angular
        .module("client")
        .directive("onlyNumber", function () {
            return {
                restrict: "A",
                link: function (scope, element, attr) {
                    element.bind('input', function () {
                        var position = this.selectionStart - 1;

                        //remove all but number and .
                        var fixed = this.value.replace(/[^0-9\.]/g, '');  
                        if (fixed.charAt(0) === '.')                  //can't start with .
                            fixed = fixed.slice(1);

                        var pos = fixed.indexOf(".") + 1;
                        if (pos >= 0)               //avoid more than one .
                            fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', '');  

                        if (this.value !== fixed) {
                            this.value = fixed;
                            this.selectionStart = position;
                            this.selectionEnd = position;
                        }
                    });
                }
            };
        });

Setzen Sie auf die HTML-Seite:

<input type="text" class="form-control" only-number ng-model="vm.cost" />
Carlos Toledo
quelle
2

Dies ist die Methode, die für mich funktioniert. Es ist in der Grundlage Samnau anwser sondern ermöglicht das Formular mit einreichen ENTER, erhöhen und verringern die Anzahl mit UPund DOWNPfeilen, Ausgabe mit DEL, BACKSPACE, LEFTund RIGHT, und navigieren Trog Felder mit TAB. Beachten Sie, dass dies für positive Ganzzahlen wie einen Betrag funktioniert.

HTML:

<input ng-keypress="onlyNumbers($event)" min="0" type="number" step="1" ng-pattern="/^[0-9]{1,8}$/" ng-model="... >

ANGULARJS:

$scope.onlyNumbers = function(event){   
    var keys={
        'up': 38,'right':39,'down':40,'left':37,
        'escape':27,'backspace':8,'tab':9,'enter':13,'del':46,
        '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57
    };
    for(var index in keys) {
        if (!keys.hasOwnProperty(index)) continue;
        if (event.charCode==keys[index]||event.keyCode==keys[index]) {
            return; //default event
        }
    }   
    event.preventDefault();
};
Leopoldo Sanczyk
quelle
2

Basierend auf der djsiz- Lösung, die in eine Richtlinie eingeschlossen ist. HINWEIS: Es werden keine Ziffern verarbeitet, es kann jedoch problemlos aktualisiert werden

angular
        .module("app")
        .directive("mwInputRestrict", [
            function () {
                return {
                    restrict: "A",
                    link: function (scope, element, attrs) {
                        element.on("keypress", function (event) {
                            if (attrs.mwInputRestrict === "onlynumbers") {
                                // allow only digits to be entered, or backspace and delete keys to be pressed
                                return (event.charCode >= 48 && event.charCode <= 57) ||
                                       (event.keyCode === 8 || event.keyCode === 46);
                            }
                            return true;
                        });
                    }
                }
            }
        ]);

HTML

 <input type="text"
        class="form-control"
        id="inputHeight"
        name="inputHeight"
        placeholder="Height"
        mw-input-restrict="onlynumbers"
        ng-model="ctbtVm.dto.height">
igorGIS
quelle
2

Verwenden Sie einfach HTML5

<input type="number" min="0"/>
Rohidas Kadam
quelle
Ja, type = "number" wird auf jeden Fall gut funktionieren. Aber es wird nicht richtig gerendert, wenn wir diese Art von Eingabe mit Bootstrap-Eingabegruppen durchführen.
Praveen
1

Sie können https://github.com/rajesh38/ng-only-number überprüfen

  1. Während der Eingabe werden nur Zahlen und Dezimalstellen in einem Textfeld eingegeben.
  2. Sie können die Anzahl der Stellen vor und nach dem Dezimalpunkt begrenzen
  3. Außerdem werden die Ziffern nach dem Dezimalpunkt abgeschnitten, wenn der Dezimalpunkt aus dem Textfeld entfernt wird, z. B. wenn Sie 123,45 eingegeben und dann den Dezimalpunkt entfernt haben. Außerdem werden die nachgestellten Ziffern nach dem Dezimalpunkt entfernt und auf 123 gesetzt.
Rajesh Paul
quelle
1

Sie könnten so etwas tun: Verwenden Sie ng-pattern mit dem RegExp " / ^ [0-9] + $ / ", was bedeutet, dass nur ganzzahlige Zahlen gültig sind.

<form novalidate name="form">
    <input type="text" data-ng-model="age" id="age" name="age" ng-pattern="/^[0-9]+$/">
    <span ng-show="form.age.$error.pattern">The value is not a valid integer</span>
</form>
Victor Oliveira
quelle
1

Diese Lösung akzeptiert nur numerische '.' und '-'

Dies schränkt auch den Leerzeicheneintrag im Textfeld ein. Ich hatte die Richtlinie benutzt, um dasselbe zu erreichen.

Bitte haben Sie die Lösung auf dem folgenden Arbeitsbeispiel.

http://jsfiddle.net/vfsHX/2697/

HTML:

<form ng-app="myapp" name="myform" novalidate> 
<div ng-controller="Ctrl">
<input name="number" is-number ng-model="wks.number">
<span ng-show="!wks.validity">Value is invalid</span>
</div>

JS:

var $scope;
var app = angular.module('myapp', []);

app.controller('Ctrl', function($scope) {
    $scope.wks =  {number: 1, validity: true}
});

app.directive('isNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {   
        element.bind("keydown keypress", function (event) {
          if(event.which === 32) {
            event.returnValue = false;
            return false;
          }
       }); 
            scope.$watch(attrs.ngModel, function(newValue,oldValue) {
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    //scope.wks.number = oldValue;
                    ngModel.$setViewValue(oldValue);
                                    ngModel.$render();
                }
            });

        }
    };
});
Suve
quelle
1

Es ist einfach und verständlich. Kopieren Sie einfach diesen Code, und Ihr Problem wird behoben. Für weitere Bedingungen ändern Sie einfach den Wert in pattern. Und Ihre Arbeit ist erledigt.

<input type="text"  pattern="[0-9]{0,}" oninvalid="this.setCustomValidity('Please enter only numeric value. Special character are not allowed.')" oninput="setCustomValidity('')">

quelle
1
<input type="phone" numbers-only >

Sie können diesen Weg verwenden, wenn Sie nur Zahlen wollen :)

Hier ist der Demo- Klick

Sagte Mohd Ali
quelle
0

Ich hatte ein ähnliches Problem und endete mit Hooking und Event

ng-change="changeCount()" 

dann:

self.changeCount = function () {
      if (!self.info.itemcount) {
        self.info.itemcount = 1;
      }
 };

Daher wird der Benutzer standardmäßig auf 1 gesetzt, wenn eine ungültige Nummer eingefügt wird.

leeroya
quelle
0

Ich arraged die jQuery in dieser

.directive('numbersCommaOnly', function(){
   return {
     require: 'ngModel',
     link: function (scope, element, attrs, ngModel) {

        element.on('keydown', function(event) {                  
            // Allow: backspace, delete, tab, escape, enter and .
            var array2 = [46, 8, 9, 27, 13, 110, 190]
            if (array2.indexOf(event.which) !== -1 ||
                 // Allow: Ctrl+A
                (event.which == 65 && event.ctrlKey === true) ||
                 // Allow: Ctrl+C
                (event.which == 67 && event.ctrlKey === true) ||
                 // Allow: Ctrl+X
                (event.which == 88 && event.ctrlKey === true) ||
                 // Allow: home, end, left, right
                (event.which >= 35 && event.which <= 39)) {
                     // let it happen, don't do anything
                     return;
            }
            // Ensure that it is a number and stop the keypress
            if ((event.shiftKey || (event.which < 48 || event.which > 57)) && (event.which < 96 || event.which > 105)) {
                event.preventDefault();
            }
         });

     }
   };
})
Plampot
quelle
0
 <input type="text" ng-keypress="checkNumeric($event)"/>
 //inside controller
 $scope.dot = false
 $scope.checkNumeric = function($event){
 if(String.fromCharCode($event.keyCode) == "." && !$scope.dot){
    $scope.dot = true
 }
 else if( isNaN(String.fromCharCode($event.keyCode))){
   $event.preventDefault();
 }
Ramesh Ramasamy
quelle
Float-Wert zulassen !!
Ramesh Ramasamy
0

Ich weiß, dass dies ein alter Beitrag ist, aber diese Anpassung der Antwort von My Mai funktioniert gut für mich ...

angular.module("app").directive("numbersOnly", function() {
  return {
    require: "ngModel",
    restrict: "A",
    link: function(scope, element, attr, ctrl) {
        function inputValue(val) {
            if (val) {
                //transform val to a string so replace works
                var myVal = val.toString();

                //replace any non numeric characters with nothing
                var digits = myVal.replace(/\D/g, "");

                //if anything needs replacing - do it!
                if (digits !== myVal) {
                    ctrl.$setViewValue(digits);
                    ctrl.$render();
                }
                return parseFloat(digits);
            }
            return undefined;
        }
        ctrl.$parsers.push(inputValue);
    }
  };
});
Janey
quelle
0

Ich habe bei getan

.js

$scope.numberOnly="(^[0-9]+$)";

.html

<input type="text" name="rollNo" ng-model="stud.rollNo" ng-pattern="numberOnly" ng-maxlength="10" maxlength="10" md-maxlength="10" ng-required="true" >
Nilesh
quelle
0

Diese Antwort dient als Vereinfachung und Optimierung gegenüber Leopoldos Antwort .

Lösen Sie bei jedem Tastendruck eine Funktion aus Ihrer Eingabe aus:

<input type="text" ng-keydown="onlyNumbers($event);"/>

Sie können die Funktion auf diese Weise in Ihrem Controller beschreiben

$scope.onlyNumbers = function(event){    
    // 'up': 38,'right':39,'down':40,'left':37,
    // 'escape':27,'backspace':8,'tab':9,'enter':13,'del':46,
    // '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57
    var keys = { 38:true,39:true,40:true,37:true,27:true,8:true,9:true,13:true,
                 46:true,48:true,49:true, 50:true,51:true,52:true,53:true,
                 54:true,55:true,56:true,57:true };

    // if the pressed key is not listed, do not perform any action
    if(!keys[event.keyCode]) { event.preventDefault(); }
}

Wenn Sie Angular 2+ verwenden, können Sie dieselbe Funktion folgendermaßen aufrufen:

<input type="text" (keydown)="onlyNumbers($event);"/>

Ihre Angular 2+ -Funktion sollte ungefähr so ​​aussehen:

onlyNumbers(event) { // the logic here }
Surya
quelle
-1

Verwenden Sie ng-only-numberdiese Option , um nur Zahlen zuzulassen, zum Beispiel:

<input type="text" ng-only-number data-max-length=5>
Suresh K.
quelle
-2
 <input
    onkeypress="return (event.charCode >= 48 && event.charCode <= 57) ||                         
    event.charCode == 0 || event.charCode == 46">
Rakib
quelle
1
Schön, dass Sie geantwortet haben, und obwohl dieser Code die Frage möglicherweise beantwortet, verbessert die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie dieser Code die Frage beantwortet, ihren langfristigen Wert.
Fraser
Danke @Fraser. Wenn es Ihnen nichts ausmacht Können Sie mir bitte helfen und bitte :)
Rakib