Disable scrolling on number field

  • Resolved muzicutza81

    (@muzicutza81)


    6 years, 9 months ago

    Hello my favorite @codepeople,

    I need to disable the scrolling on number field (I don’t want the numbers to go up or down when scrolling the mouse wheel when the focus is on the number field). I have the following code, but it doesn’t seem to do the trick:

    fbuilderjQuery(document).on(‘focus’, ‘input[type=”number”]’, function (e) {
    $(this).on(‘mousewheel.disableScroll’, function (e) {
    e.preventDefault();
    });
    });

    fbuilderjQuery(document).on(‘blur’, ‘input[type=”number”]’, function (e) {
    $(this).off(‘mousewheel.disableScroll’);
    });

    Thanks much!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @muzicutza81,

    Use the name of the jQuery instance (fbuilderjQuery) and not the shortcut sign: $

    Insert a “HTML Content” field in the form with the following piece of code as its content:

    
<script>
fbuilderjQuery('form').on('focus', 'input[type=number]', function (e) {
  fbuilderjQuery(this).on('mousewheel.disableScroll', function (e) {
    e.preventDefault();
  });
});
fbuilderjQuery('form').on('blur', 'input[type=number]', function (e) {
  fbuilderjQuery(this).off('mousewheel.disableScroll');
});
</script>

    Best regards.

    Thread Starter muzicutza81

    (@muzicutza81)

    Great, thanks! That solved it for Chrome; it was still increasing/decreasing the numbers in Firefox so I changed it to the following and now it behaves as desired. Thanks again!

    <script>
    fbuilderjQuery(‘form’).on(‘focus’, ‘input[type=number]’, function (e) {
    fbuilderjQuery(this).on(‘wheel.disableScroll’, function (e) {
    e.preventDefault();
    });
    });
    fbuilderjQuery(‘form’).on(‘blur’, ‘input[type=number]’, function (e) {
    fbuilderjQuery(this).off(‘wheel.disableScroll’);
    });
    </script>

    Plugin Author codepeople

    (@codepeople)

    Hello @muzicutza81,

    Thank you very much for sharing your solution.

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Disable scrolling on number field’ is closed to new replies.