How can I turn off the scroll to change number value?

  • aspirebrokers
    Asked on April 15, 2016 at 12:55 AM

    Hi Guys,

     

    When you click on a number box and then use your track pad (laptop, apple mouse or mouse scroll wheel) to move down the page it instead changes the number in the box.  This is rare on a PC with a scroll wheel because you actually have to keep the mouse in the box however on a Mac when you type the curser dissapears and then when you go to move down the page the number annoyingly changes.

    Is there a way to turn this feature off?

     

    Thanks

  • Chriistian Jotform Support
    Replied on April 15, 2016 at 2:25 AM

    Can you please try injecting the css below to prevent the number field from changing the value when it is scrolled?

    input[type=number]::-webkit-inner-spin-button, 

    input[type=number]::-webkit-outer-spin-button { 

      -webkit-appearance: none; 

      margin: 0; 

    }

    Here's a demo form where I tested the css: https://form.jotform.com/61051554972961 

    Unfortunately, if the issue persists after injecting the css, then we will need to add javascript to the form to prevent the scroll wheel from changing the value of the input. However, adding javascript is not allowed in the forms.

    It is only possible to add javascript if you use the full source code of the form. Here's the javascript that we will be adding if you choose to use the full source:

    $(function(){

      $(':input[type=number]').on('mousewheel',function(e){ $(this).blur(); });

    });

    Here's the post where I got the javascript code: Disable Scroll Wheel On Number Inputs

    If you need further assistance, please let us know.
    Regards.

  • ARWFashion
    Replied on May 15, 2017 at 5:38 AM

    Hello, 

    Can you please send the edit-mode of the demo? 

     

    Thx

  • candy
    Replied on May 15, 2017 at 6:11 AM

    Hello @ARWFashion,

    I have split the thread in order to assist better, as you can find it at the following URL: https://www.jotform.com/answers/1144590/ 

    You are answered at that link.

    Thank you.