it-swarm.com.de

anglejs: Nur Zahlen können in ein Textfeld eingegeben werden

In anglejs steht eine Funktionalität zur Verfügung, mit der nur Zahlen in ein Textfeld eingegeben werden können wie

64
Ali Hasan

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

EDIT:

Sie können das Jquery-Plugin in die Direktive packen. 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();
        }
    }
});
23
anazimok

Dieser Code zeigt das Beispiel, wie Sie die Eingabe von nicht-stelligen Symbolen verhindern.

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;
            });
        }
    };
});
62
Anton

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);
      }
    };
 });
41
My Mai

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

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

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

Vielen Dank

17
Sijan Gurung

Meine Lösung akzeptiert Copy & Paste und speichert die Position des Caret. Es wird für die Kosten von Produkten verwendet, sodass nur positive Dezimalwerte möglich sind. Kann sehr leicht umgefasst werden, 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;
                        }
                    });
                }
            };
        });

Auf die HTML-Seite setzen:

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

Um auf Antons Antwort ein wenig 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;
            });
        }
    };
});
7
Craig

Basierend auf djsiz solution, umwickelt in der Direktive . HINWEIS: Es werden keine Ziffern behandelt, 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">
3
igorGIS

Dies ist die Methode, die für mich funktioniert. Es basiert auf samnau anwser , erlaubt jedoch das Senden des Formulars mit ENTER, das Erhöhen und Verringern der Anzahl mit UP und DOWN-Pfeilen, die Ausgabe mit DEL, BACKSPACE, LEFT und RIGHT und das Navigieren durch Felder mit TAB. Beachten Sie, dass es für positive ganze Zahlen 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();
};
2

Verwenden Sie einfach HTML5 

<input type="number" min="0"/>
2
Rohidas Kadam

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

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

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

  1. Sie beschränkt die Eingabe während der Eingabe auf Zahlen und Dezimalpunkte in einem Textfeld.
  2. Sie können die Anzahl der vor und nach dem Dezimalzeichen zulässigen Stellen begrenzen
  3. Es schneidet auch die Ziffern nach dem Dezimalpunkt ab, wenn der Dezimalpunkt aus dem Textfeld entfernt wird, z. Wenn Sie 123.45 eingegeben haben und dann den Dezimalpunkt entfernen, werden auch die nachfolgenden Ziffern nach dem Dezimalpunkt entfernt und auf 123 gesetzt.
1
Rajesh Paul

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

Dies schränkt auch die Leerzeicheneingabe auf das Textfeld ein. Ich hatte die Richtlinie benutzt, um das gleiche zu erreichen.

Bitte haben Sie die Lösung unten.

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

        }
    };
});
1
Suve

Sie könnten so etwas tun: Verwenden Sie ng-pattern mit dem RegExp "/^ [0-9] + $/" das bedeutet, dass nur ganze 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>
1
Victor Oliveira
 <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();
 }
0
Ramesh Ramasamy

Ich weiß, dass dies ein alter Beitrag ist, aber diese Anpassung von My Mai 's Antwort 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);
    }
  };
});
0
Janey

Ich hatte ein ähnliches Problem und endete mit dem Anlegen und der Veranstaltung 

ng-change="changeCount()" 

dann:

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

Der Benutzer hat also den Standardwert 1, wenn eine ungültige Nummer eingefügt wird.

0
leeroya

Ich habe die jQuery in this

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

     }
   };
})
0
plampot

Diese Antwort dient zur Vereinfachung und Optimierung der 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 in Ihrer Steuerung auf diese Weise 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(); }
}

Falls Sie Angular 2+ verwenden, können Sie dieselbe Funktion auf diese Weise aufrufen:

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

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

onlyNumbers(event) { // the logic here }
0
Surya
<input type="phone" numbers-only >

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

hier ist die demo klick

0
Sayed Mohd Ali

Ich habe es getan bei

.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" >
0
Nilesh Panchal