'Shift + up arrow behaviour on number field

I have a requirement in which I need jump of 10 on pressing Shift+up/down arrow key on html number field, anyone knows if there's any existing solution or any way to do that?

Any kind of suggestion or help will be appreciated.

javascriptjqueryhtml


Solution 1:[1]

[EDITED] You can achieve that using below snippet,

Checkout this JSFiddle demo: https://jsfiddle.net/ctkt66a0/9/

HTML:

<label for="user_lic">Number of user license : </label><input id="user_lic" type="text" value ="5" />

Javascript

window.onkeyup = function(e) {
    if (e.keyCode == 38)
    {
        if (e.shiftKey === true)
        {
            // new line
            //alert('yes');
                        var valu = parseInt($('#user_lic' ).val()) + parseInt(10);
            //alert(valu);
            $('#user_lic').val('');
            $('#user_lic').val('').val(valu);
        }
        else
        {
            // run your function
        }
        return false;
    }
    else if (e.keyCode == 40) {
        if (e.shiftKey === true)
        {
            // new line
            //alert('yes');
                        var valu = parseInt($('#user_lic' ).val()) - parseInt(10);
            //alert(valu);
            $('#user_lic').val('');
            $('#user_lic').val('').val(valu);
        }
        else
        {
            // run your function
        }
        return false;
    }
}

HTH

Solution 2:[2]

The answers here are a bit odd, and this is a question I often find myself wondering (it should be built in, surely!).

This code loops through every number input. If you haven't pressed shift or pressed up or down it bails early, and if the input has a blank value it gives it a value of 0 first (because you can't add or subtract from an empty string). It is a wrapped in a self invoking function so I could include the UP and DOWN consts.

(function(){
  const UP = 38;
  const DOWN = 40;
  Array
    .from(document.querySelectorAll("input[type=\"number\"]"))
    .forEach( input => {
      input.addEventListener("keydown", (e) => {
        if(!e.shiftKey || (e.keyCode != UP && e.keyCode != DOWN)){
          return;
        }
        e.preventDefault();
        if(input.value == ""){
          input.value = 0;
        }
        if(e.keyCode == UP){
          return input.value = parseFloat(input.value) + 10;
        }
        if(e.keyCode == DOWN){
          input.value = parseFloat(input.value) - 10;
        }
      });
    })  
})();

And an example:

https://codepen.io/EightArmsHQ/pen/bfde2271e0bf3eeaab347b4eeac06efe?editors=0010

Solution 3:[3]

check this JsFiddle Demo

you can use the step attribute

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Djave
Solution 3 Himanshu

Related Questions