Question 10973 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Javascript disable scroll on input type=text – Jquery

Having a table with input fields as td. Example of input field:

`<input type="text" value="20.300,00" style="max-width: 95px;">`

Im trying to disable the ability to scroll in this element. This is my code:

`$(document).on("wheel", function(event) {
          if ($(document.activeElement).is("input[type='text']")) {
              $(document.activeElement).blur();
          }
      });`

With this code, it’s still possible to scroll once, which changes the value once and afterwards its removing focus from the input field.

How can i completely remove the ability to scroll?

I’ve tried to use:

`event.preventDefault();`

That doesn’t seem to be a option.

Tags:

3

Answers


  1. 0

    Good afternoon,

    You could take a look at this answer, There is no builtin feature to prevent this as far as I know.

    Anyway the post I linked shows you how to ‘disable’ mousewheel scrolling while the input element is active.

    Hope it helps!

    Note: you would obviously change input[type=number] to input[type=text]

    Login or Signup to reply.
  2. 0

    I think if you will add event.preventDefault() inside your if condition then I think it will do the job.

    Login or Signup to reply.
  3. 0

    You should be able to reset the scroll to zero, which effectively disables scrolling.

    $('input[type=text]').on("scroll", function(){
    $(this).scrollLeft(0);
});

    And if you wanted to re-enable scrolling on some event or interaction.

    $(this).unbind("scroll");
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search