Support

Account

Register Login

Home › Forums › Backend Issues (wp-admin) › Number fields change if have focus and scroll

Solved

Number fields change if have focus and scroll

  • I searched around but didn’t find anything substantial… using the free acf v4.4.11.

    Using multiple Number field types. Say user enters “10”. If they leave the cursor in the field and scroll… that increments the integer in the field. So we’ve been getting weird entries when user was unaware the integer changed in the field.

    I know I could set it to a “text” field type but I want the verification ACF uses for number fields.

    Is there something I’m missing in setting up number fields?

    Is there a way to fix that w/o changing all those fields to text and then requiring the input to be an (int) in php after?

    This is happening in Chrome and Safari. Assuming FF as well.

    Thx

  • This is a standard browser behavior for number fields and is not due to anything specific that ACF is doing.

    This looks like it may have a solution http://stackoverflow.com/questions/9712295/disable-scrolling-on-input-type-number

  • Yeah, copy that. May just have to enqueue that JS into admin… or may just switch the fields to be text. That’s a very annoying issue.

    It’d be nice if we could control the width and/or rows/cols of the admin field display… I think that’s a pro thing in acf5 tho.

    Alright guys. thanks.

  • Yes, it is. A free version on ACF5 is in the works and those features will likely be included.

    As far as the number field, I have set min max rows on repeaters and flex fields by scrolling when the field was active and I’ve seen people mess of pages because of it. I never bothered to look for a solution, usually too busy, but I may have to implement something similar. I agree with one of the posters in that thread, changing the value of the field when scrolling is one of the stupider browser features and it should be removed… or it should only do so when the mouse is actually over the field.

  • lol exactly. “it’s not a bug it’s a feature”…. dumb feature. agreed.

  • also helpful https://codepen.io/pixelthing/pen/LIqsg

  • 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.

  • nice repo. I’ll consider that script for what i’m doing but probably enqueue it properly for the cpt edit pages

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Number fields change if have focus and scroll’ is closed to new replies.