oTree Forum >

Disabling mouse wheel and arrow in number inputs

#1 by AndyFM

Any idea how to prevent the mouse wheel or the arrow keys from modifying a keyboard inputed number?

I'm entering formfields "manually" as in

{{ formfield 'c1' label="some label" }}

I don't know what javascript to use to disable the wheel/arrows, nor how to refer to the formfield by id.

#2 by AndyFM

In case it might be useful to someone, this works on my tests (to be included on the HTML code of a given form page):

<script>// Get all form inputs
var inputs = document.getElementsByTagName('input');

// Add event listeners to each input
for (var i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('wheel', function(event) {
    // Disable mouse wheel event
    event.preventDefault();
  });

  inputs[i].addEventListener('keydown', function(event) {
    // Disable arrow key event
    if (event.keyCode === 38 || event.keyCode === 40) {
      event.preventDefault();
    }
  });
}
</script>

Write a reply

Set forum username