Question

I have an input box with a numeric value in it. When the user press ARROW_UP once, the number should be incremented by one. When the user press a long ARROW_UP, the number should be incremented with a bigger value.

I am looking for a jQuery solution, but a plain JavaScript solution is fine as well.

Answer 1

//I have not tested it, but it should work or you have to do some minor adjustments.
// to make it numeric only

$(“#txt”).keydown(function(event){

    if ( event.keyCode == 46 || event.keyCode == 8 ) {
        // dont do anything
    }
    else {
        if (event.keyCode < 48 || event.keyCode > 57 ) {
            event.preventDefault(); 
        }   
    }

});

// for arrow keys

$(“txt”).keypress(function(event) {

var intVal = 0;

if ($("txt").val() != '')
{
   intVal = $("txt").val();
}


if ( event.which == 38 ) 
{
   $("txt").val(intVal + 1);
}

if ( event.which == 40 )  
{
   $("txt").val(intVal - 1);
}

});