What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by aspirebrokers 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

    scroll scroll to turn off how
  • Profile Image
    JotForm Support

    Answered by Chriistian on April 15, 2016 at 02: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.