1

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.

Silas Jensen
  • 11
  • 1
  • If I can't "scroll" in the field, then I will probably not be able to properly edit the value either. So _why_ are those input fields to begin with then, if you apparently are trying to make proper editing impossible? – CBroe Mar 10 '23 at 13:32
  • It should still be possible to change the value using your keyboard. I just want to prevent changeing the value using the scrollwheel. – Silas Jensen Mar 10 '23 at 13:33
  • *"With this code, it's still possible to scroll once, which changes the value once..."* Are you sure the `input` you've shown at the top of the question is really what you're using? Because you have `type="text"` on it, so [scrolling doesn't do anything to the value](https://jsfiddle.net/tjcrowder/ra0yg5pj/). If you had `type="number"`, scrolling changes the value in Firefox (not Chromium browsers), but not `type="text"`. – T.J. Crowder Mar 10 '23 at 13:44
  • Yes, it is the right Input. The input field is type=text, but is formatted to only contain numbers between 0-9. – Silas Jensen Mar 10 '23 at 13:51

3 Answers3

1

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");
brassmookie
  • 349
  • 2
  • 13
-1

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]

TiesDO
  • 31
  • 8
-1

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

Dhaval Mistry
  • 476
  • 1
  • 9
  • 17