How to prevent input type="number" taking e

Question

I had a text field of type="text" but it is allowing e to be entered ..I even want to prevent that happening how can we do that?

  <input class="form-control" maxlength="12" ng-model="$ctrl.NumberInput" type="number"
   min="0" required focus>

Can someone help!

@Rob If i copy and paste it is still allowing e der – H Varma Dec 12 '16 at 11:35 — H Varma, Dec 12 '16 at 11:35

Sajeetharan · Answer 1 · 2016-12-12T11:52:01.647

2

You can use the following directive which will restrict only for numbers

app.directive('validNumber', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if(!ngModelCtrl) {
        return; 
      }

      ngModelCtrl.$parsers.push(function(val) {
        if (angular.isUndefined(val)) {
            var val = '';
        }

        var clean = val.replace(/[^-0-9\.]/g, '');
        var negativeCheck = clean.split('-');
        var decimalCheck = clean.split('.');
        if(!angular.isUndefined(negativeCheck[1])) {
            negativeCheck[1] = negativeCheck[1].slice(0, negativeCheck[1].length);
            clean =negativeCheck[0] + '-' + negativeCheck[1];
            if(negativeCheck[0].length > 0) {
                clean =negativeCheck[0];
            }

        }

        if(!angular.isUndefined(decimalCheck[1])) {
            decimalCheck[1] = decimalCheck[1].slice(0,2);
            clean =decimalCheck[0] + '.' + decimalCheck[1];
        }

        if (val !== clean) {
          ngModelCtrl.$setViewValue(clean);
          ngModelCtrl.$render();
        }
        return clean;
      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
});

DEMO

If you do not want to use directive use ng-pattern

 <input type="text" ng-model="$ctrl.numberInput"   ng-pattern="/[^0-9]/g" required />

DEMO

edited Dec 12 '16 at 11:52

answered Dec 12 '16 at 11:31

Sajeetharan

216,225
63
350
396

Is der anyway without directive? – H Varma Dec 12 '16 at 11:35
@HVarma check updated answer – Sajeetharan Dec 12 '16 at 11:40
It is still allowing e in your second demo rite>? – H Varma Dec 12 '16 at 11:42
@HVarma yes it does, probably directive would be the answer – Sajeetharan Dec 12 '16 at 11:48
your first answer doesn't accept decimal, and second accepts 'e' – mrid Dec 12 '16 at 11:49
@mrid modified it – Sajeetharan Dec 12 '16 at 11:52
your first one's working fine !! but second is still kinda buggy – mrid Dec 12 '16 at 11:58
@Sajeetharan..Its working.I want to know this,will the use of directives have any impact on performance? – H Varma Dec 12 '16 at 16:23
@HVarma It wont cause any issue until you use for many input boxes – Sajeetharan Dec 12 '16 at 16:45
@Sajeetharan can u help in this? http://stackoverflow.com/questions/41105598/how-to-disable-a-button-if-the-form-is-valid – H Varma Dec 12 '16 at 17:36
sure i will do! what do you want to achieve? – Sajeetharan Dec 12 '16 at 17:44

xkeshav · Answer 2 · 2016-12-12T11:57:46.123

2

you can try the easiest way : ng-pattern

 <input type="text" ng-model="$ctrl.numberInput"  ng-pattern="/^\d+$/" required />

edited Dec 12 '16 at 11:57

answered Dec 12 '16 at 11:35

xkeshav

53,360
44
177
245

How to prevent input type="number" taking e

2 Answers2