angularjs: allows only numbers to be typed into a text box angularjs: allows only numbers to be typed into a text box ruby-on-rails ruby-on-rails

angularjs: allows only numbers to be typed into a text box


This code shows the example how to prevent entering non digit symbols.

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


HTML

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

// Just type 123

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

// type: 123 or 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);      }    }; });


I just used ng-keypress in the directive for my input.

HTML:

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

JS:

$scope.filterValue = function($event){        if(isNaN(String.fromCharCode($event.keyCode))){            $event.preventDefault();        }};