CODEWITHSUNDEEP
javascriptjquery
John Magnolia
John Magnolia

Reputation: 16803

Jquery increase/decrease number in input text by up/down arrows keyboard

I have a basic quantity field and would like to allow the user to increase/decrease the number within this input box based on the keyboard up/down.

Following on from: EndangeredMassa answer on keyboard code https://stackoverflow.com/a/375426/560287 how would I add this into a keyup function?

var keynum = 0;

if(window.event) { keynum = e.keyCode; }  // IE (sucks)
else if(e.which) { keynum = e.which; }    // Netscape/Firefox/Opera

if(keynum == 38) { // up
    //Move selection up
}

if(keynum == 27) { // down
    //Move selection down
}

Upvotes: 3

Views: 10181

Answers (8)

Mark Dean Guillermo
Mark Dean Guillermo

Reputation: 51

Setting your input type to number will work as well. Though this won't work too great in IE9 and below.

<input type="number">

Source: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number

Upvotes: 5

nakupanda
nakupanda

Reputation: 111

There's a small jQuery plugin for doing this: https://github.com/nakupanda/number-updown

Usages:

$('#textInput').updown();

View live demo here: http://jsfiddle.net/XCtaH/embedded/result/

Keyboard and mousewheel events supported

Upvotes: 2

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

You could do:

<input type="text" id="yourinput" value="0">

$(document).on("keypress", '*', function(e) {
    if (e.keyCode == 38) { // up
        $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
    }

    if (e.keyCode == 40) { // down
        $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1);
    }
});

fiddle here http://jsfiddle.net/mSCBL/1/

Upvotes: 1

Salt Hareket
Salt Hareket

Reputation: 764

$("input").keypress(function(event) {
      var val=$(this).val();
      if ( event.keyCode== 38) {
          val++
         $(this).val(val)
      }
      if ( event.keyCode== 40) {
          val--
          $(this).val(val)
      };    
});

Upvotes: 1

Jasper
Jasper

Reputation: 76003

//cache our input since we will be working with it each time an arrow key is pressed
var $input = $('input');

//bind the the `keydown` event for the `document` object which will catch all `keydown` events that bubble up the DOM
$(document).on('keydown', function (event) {

    //up-arrow (regular and num-pad)
    if (event.which == 38 || event.which == 104) {

        //make sure to use `parseInt()` so you can numerically add to the value rather than concocting a longer string
        $input.val((parseInt($input.val()) + 1));

    //down-arrow (regular and num-pad)
    } else if (event.which == 40 || event.which == 98) {
        $input.val((parseInt($input.val()) - 1));
    }
});

Here is a demo: http://jsfiddle.net/QRNP8/1/

Note that jQuery normalizes the charCode/keyCode properties into event.which:

Query normalizes the following properties for cross-browser consistency:

target
relatedTarget
pageX
pageY
which
metaKey

Source: http://api.jquery.com/category/events/event-object/

Upvotes: 7

techfoobar
techfoobar

Reputation: 66693

This should work

if(keynum == 38) { // up
    this.value = parseInt(this.value)-1;
}

if(keynum == 27) { // down
    this.value = parseInt(this.value)+1;
}

Upvotes: 0

Dutchie432
Dutchie432

Reputation: 29160

Your codes looks correct-ish. If your just wondering how to bind the code to the event...

$('#itemId').keyup(function(e){ 
    /*YOUR CODE*/  
});

Upvotes: 0

James Montagne
James Montagne

Reputation: 78690

$("something").keyup(function(e){
    var keynum = 0;

    if(window.event) { keynum = e.keyCode; }  // IE (sucks)
    else if(e.which) { keynum = e.which; }    // Netscape/Firefox/Opera

    if(keynum == 38) { // up
       //Move selection up
    }

    if(keynum == 27) { // down
       //Move selection down
    }
});

Where something is a selector which matches your input(s).

Upvotes: 0

Related Questions