AngularJS Example:

by gangadharjannu

HTML

<div ng-controller="MyController as MC">
  <input id="Price" name="Price" type="number" disable-mousewheel>
</div>

CSS

input[type=number] {
    -moz-appearance:textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

JavaScript

(function(){
  'use strict';
  angular
    .module('myApp',[]);
  
  angular
    .module('myApp')
    .controller('MyController',MyController)
    .directive('ngNumber', disableMousewheel);
  
  MyController.$inject=[];
  function MyController(){
    
  }
  
  disableMousewheel.$inject=[];
  function disableMousewheel(){
    var DDO={
      restrict:'A',
      link: function(scope,element,attrs){
        // Firefox: DOMMouseScroll
        // IE9, Chrome, Safari, Opera: mousewheel
        element.on('DOMMouseScroll mousewheel', function(e){
          e.preventDefault();
        });
        element.on('blur', function(e){
          element.off('DOMMouseScroll mousewheel');
        });
      }
    };
    
    return DDO;
  }
}());

// // disable mousewheel on a input number field when in focus
// // (to prevent Cromium browsers change the value when scrolling)
// $('form').on('focus', 'input[type=number]', function (e) {
//   $(this).on('mousewheel.disableScroll', function (e) {
//     e.preventDefault()
//   })
// })
// $('form').on('blur', 'input[type=number]', function (e) {
//   $(this).off('mousewheel.disableScroll')
// })