Disable arrow keys for number input using angularjs

Question

I want to disable the up and down keys for a number input through angularjs directive (or otherwise).
Note: I don't want to change the input type to text as I have been asked not to. I already removed the spinners too. I am new to angular so don't know much about it. I googled through all the links I could find but they were mostly about hiding the spinners and not about disabling the arrow keys. I got this code from some other link. This disables the mousewheel for the same. If some changes to this can be done, that will be great.

module.directive('input',function() {
return {
    restrict: 'E',
    scope: {
        type: '@'
    },
    link : function (scope, $element) {
        if (scope.type == 'number') {
            $element.on('focus', function () {
                angular.element(this).on('keyup', function (e) {
                    e.preventDefault();
                });
            });
            $element.on('blur', function () {

                angular.element(this).off('keyup');
            });
        }
    }
}
});

Please move your question to the body of post. Please also post what you have tried and/or studied. — Kolban
– Kolban, Commented Nov 2, 2014 at 4:32
Perhaps "Disable the up and down keys for a number input using angularjs". In the body of your question, you can then be as descriptive as necessary to get the information over to a potential responder. — Kolban
– Kolban, Commented Nov 2, 2014 at 4:43
I've rarely seen questions with the body visually shorter than the title. You should consider giving examples or wait for people to vote down or close your question — Daniel Cheung
– Daniel Cheung, Commented Nov 2, 2014 at 4:45
I have made some changes. Please let me know if I need to make more. — nikgpuec
– nikgpuec, Commented Nov 2, 2014 at 4:47

Ilan Frumer · Accepted Answer · 2014-11-02 17:28:34Z

5

If you want to disable up/down arrow keys globally for all input[number] elements:

$(document).bind('keydown', function(event) {
  var target = event.srcElement || event.target;
  var tag = target.tagName.toUpperCase();
  var type = target.type.toUpperCase();
  if (tag === 'INPUT' && type === 'NUMBER' && 
     (event.keyCode === 38 || event.keyCode === 40)) {
    event.preventDefault();
  }
});

Or you can bind it to a single element with a directive:

.directive('disableArrows', function() {

  function disableArrows(event) {
    if (event.keyCode === 38 || event.keyCode === 40) {
      event.preventDefault();
    }
  }

  return {
    link: function(scope, element, attrs) {
      element.on('keydown', disableArrows);
    }
  };  
});

template:

 <input type="number" disable-arrows />

edited Nov 2, 2014 at 17:28

answered Nov 2, 2014 at 8:16

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikgpuec Over a year ago

Thanks a lot. This works globally. But I want to restrict it to only some inputs. Can that be done?

Mimo · Accepted Answer · 2014-11-02 08:19:49Z

1

You can change your directive to:

module.directive('input',function() {
return {
    restrict: 'E',
    scope: {
        type: '@'
    },
    link : function (scope, $element) {
        if (scope.type == 'number') {
            $element.on('focus', function () {
                angular.element(this).on('keyup', function (e) {
                    if (event.keyCode === 38 || event.keyCode === 40) {
                       e.preventDefault();
                    }
                });
            });
            $element.on('blur', function () {

                angular.element(this).off('keyup');
            });
        }
    }
}
});

answered Nov 2, 2014 at 8:19

Mimo

6,0957 gold badges38 silver badges46 bronze badges

Collectives™ on Stack Overflow

Disable arrow keys for number input using angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related