Skip to content

Instantly share code, notes, and snippets.

@pererinha
Created June 30, 2014 12:58
Show Gist options
  • Save pererinha/aaef044b021bbf7372e5 to your computer and use it in GitHub Desktop.
Save pererinha/aaef044b021bbf7372e5 to your computer and use it in GitHub Desktop.
Angular JS Directive - to disable mouse wheel on input type number
directive( 'ignoreMouseWheel', function( $rootScope ) {
return {
restrict: 'A',
link: function( scope, element, attrs ){
element.bind('mousewheel', function ( event ) {
element.blur();
} );
}
}
} );
// <input type="number" ignore-mouse-wheel ... >
@MusicMonkey5555
Copy link

@carmelc Thanks for that update, but I was wondering if you or anyone else were able to tweak it so it doesn't skip up the page when scrolling over a field. Trying to figure out if the blink or the jump is worse.
Great resources all together though. Really sad there isn't something built into the html for this since it can get really annoying.

@MusicMonkey5555
Copy link

I was going to say I opted for the blink, but that also has the side affect of changing what field is focused.

Copy link

ghost commented Jan 23, 2018

For me it was element.bind('wheel', ... and element[0]

@henck
Copy link

henck commented Dec 3, 2018

The wheel event is compatible with both Chrome and Firefox. In Firefox, mousewheel does not work. See also here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment