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

Question

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
}

have you looked at tangle.js? it has a really nice way of dealing with number fields — CamelCamelCamel, Dec 22 '11 at 19:32
I think all you require now is this.value++ and this.value-- for up and down arrows respectively, you might need to use this.value = this.value.toInt()++. — CBusBus, Dec 22 '11 at 19:32

Jasper · Accepted Answer · 2011-12-22T19:38:10.510

7

//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/

edited Dec 22 '11 at 19:38

answered Dec 22 '11 at 19:32

Jasper

75,717
14
151
146

stop propogating the use of "=="! :P – jbabey Dec 22 '11 at 19:42
@jbabey Actually I'm glad someone brought it up, what is the improvement? I get that triple equals will require the variable types to be the same but they perform the same...: http://jsperf.com/double-equals-vs-tripple-equals – Jasper Dec 22 '11 at 19:46
using identity operators instead of equality forces you to write better code, at least in theory :P I would equate it to turning option strict on in VB.net/C# - it is good practice to use it all the time regardless of whether it would work the other way so that you avoid that fringe case that bites you in the butt. – jbabey Dec 22 '11 at 19:56
I know this is super old, but just wondering how to make this only work if the input field is currently selected? At the moment, this will change the input field when someone is just using the arrows to scroll the page. EDIT: Nevermind, as soon as I asked, it clicked! I wrapped it with $('input').focus(function() { // the rest here }); – Benbodhi May 09 '17 at 17:21

score 5 · Answer 2 · answered Feb 19 '15 at 21:12

5

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

answered Feb 19 '15 at 21:12

Mark Dean Guillermo

51
1
1

score 2 · Answer 3 · answered Apr 05 '13 at 02:41

2

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

answered Apr 05 '13 at 02:41

nakupanda

111
1
2

Nicola Peluchetti · Answer 4 · 2011-12-22T20:23:04.400

1

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/

edited Dec 22 '11 at 20:23

answered Dec 22 '11 at 19:30

Nicola Peluchetti

76,206
31
145
192

I think you wanted to write if (e.keyCode == 40) { // down $('#yourinput').val(parseInt($('#yourinput').val(), 10) - 1); } in place of if (e.keyCode == 40) { // down $('#yourinput').val(parseInt($('#yourinput').val(), 10) + 1); } – Sajib Mahmood Dec 22 '11 at 19:50

score 1 · Answer 5 · answered Dec 22 '11 at 19:41

1

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

answered Dec 22 '11 at 19:41

Salt Hareket

764
7
18

score 0 · Answer 6 · answered Dec 22 '11 at 19:30

0

$("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).

answered Dec 22 '11 at 19:30

James Montagne

77,516
14
110
130

jQuery normalizes the which property so that it works cross browser i think – Nicola Peluchetti Dec 22 '11 at 19:31
Fair enough. Wasn't really looking at the code itself, more showing how to stick it in a `keyup`. – James Montagne Dec 22 '11 at 19:32

score 0 · Answer 7 · answered Dec 22 '11 at 19:30

0

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

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

answered Dec 22 '11 at 19:30

Dutchie432

28,798
20
92
109

score 0 · Answer 8 · answered Dec 22 '11 at 19:31

0

This should work

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

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

answered Dec 22 '11 at 19:31

techfoobar

65,616
14
114
135

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

8 Answers8