CODEWITHSUNDEEP
javascriptjqueryhtml
Adhum
Adhum

Reputation: 117

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.

Upvotes: 1

Views: 700

Answers (3)

Djave
Djave

Reputation: 9329

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

Upvotes: 0

Himanshu
Himanshu

Reputation: 490

check this JsFiddle Demo

you can use the step attribute

Upvotes: -1

David R
David R

Reputation: 15667

[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

Upvotes: 2

Related Questions