Reply To: Number fields change if have focus and scroll

• John Huebner

• May 1, 2017 at 2:42 am

So, I looked into a way to do this myself, since this is a point of irritation for not only me but my clients.

The problem with the available solutions I’ve found is tat page scroll is disabled when the mouse is over the number field. My goal was to allow the mouse scroll to change the number only when the number field has focus AND the mouse is over the number field, which is in my opinion, the way that it should work.

This combines some of what was found in the linked documents. I have only tested this on FireFox, but it appears to get the desired result. It’s also set up specifically for the WP Admin, but should work for anything.

add_action('admin_footer', 'correct_number_scrollwheel');
function correct_number_scrollwheel() {
  ?>
    <script type="text/javascript">
      jQuery(document).ready(function($){
        // need to loop through all number fields
        // in order to add a flag to enable/disable the mousewheel
        $('input[type="number"]').each(function(index, element) {
          // disable mousewheel by default on all number fields
          $(element).data('disable-mousewheel', true);
          // test if mousewheel is disabled, if it is prevent changing number field
          $(element).on('mousewheel', function(e) {
            if ($(element).data('disable-mousewheel')) {
              e.preventDefault();
            }
          }); // end on mousewheel
          // only enable the mousewheel when the mouse enters the number field
          $(element).on('mouseenter', function(e) {
            $(element).data('disable-mousewheel', false);
          }); // end on mouseenter
          // disable the mousewheel when the mouse leaves the number field
          $(element).on('mouseleave', function(e) {
            $(element).data('disable-mousewheel', true);
          }); // end on mouseleave
        }); // end each number element
      }); // end doc ready
    </script>
  <?php 
}

Note: I have also added this to my acf filters and functions library https://github.com/Hube2/acf-filters-and-functions/blob/master/correct-number-field-mouse-scrollwheel-action.php since I’ll likely be implementing it on many sites.