CODEWITHSUNDEEP
javascriptincrementarrow-keys
Desolator
Desolator

Reputation: 22759

increase number when I press arrow key on keyboard with javascript

I have a textbox has a numeric value. now what I want is to keep increasing that numeric value while im pressing and holding any of arrow keys. I know how to do this if I was pressing only one time. it will be increased by 1 only. but what If I want to keep increasing the value while i'm holding the arrow keys. how to do that?

thanks

Upvotes: 1

Views: 5032

Answers (5)

Sanskar Tiwari
Sanskar Tiwari

Reputation: 37

I wanted to do this, i just used input field with type="number"

Upvotes: 0

nakupanda
nakupanda

Reputation: 111

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

Usages:

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

$('#step').updown({ step: 10, shiftStep: 100 });

$('#minMax').updown({ min: -10, max: 10 });

$('#minMaxCircle').updown({ min: -10, max: 10, circle: true });

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

Keyboard and mousewheel events supporte

Upvotes: 2

gilly3
gilly3

Reputation: 91557

If you don't care about supporting Opera, this is easy:

textbox.onkeydown = function(e)
{
    if (e.keyCode == 38)
    {
        incrementTextBox();
    }
}

However, Opera doesn't fire keydown for key repeats... you'll have to mimic that by calling incrementTextBox() at an interval, and stopping when the key is lifted. I tested this in WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, even IE Quirks:

var textbox = null;
window.onload = function()
{
    var timeoutId = null;
    var intervalId = null;
    var incrementRepeatStarted = false;
    function startIncrementKeyRepeat()
    {
        timeoutId = window.setTimeout(function()
        {
            intervalId = window.setInterval(incrementTextBox, 50);
        }, 300);
    }
    function abortIncrementKeyRepeat()
    {
        window.clearTimeout(timeoutId);
        window.clearInterval(intervalId);
        timeoutId = null;
        intervalId = null;
    }
    function endIncrementKeyRepeat()
    {
        abortIncrementKeyRepeat();
        incrementRepeatStarted = false;
    }
    textbox = document.getElementById("incrementer");
    textbox.onkeydown = function(e)
    {
        e = e || window.event;
        if (e.keyCode == 38)
        {
            if (!incrementRepeatStarted)
            {
                startIncrementKeyRepeat();
                incrementRepeatStarted = true;
            }
            else if (timeoutId || intervalId)
            {
                abortIncrementKeyRepeat();
            }
            incrementTextBox();
        }
        else if (incrementRepeatStarted)
        {
            endIncrementKeyRepeat();
        }
    }
    textbox.onkeyup = endIncrementKeyRepeat;
}
function incrementTextBox()
{
    var val = parseInt(textbox.value) || 0;
    val++;
    textbox.value = val;
}

Upvotes: 0

Desolator
Desolator

Reputation: 22759

ok after some tests I made here is how its done:

var setTimeoutId; 
var keyIs = "up"; 

 function myIncrementFunction()
    {
            var num = parseFloat(myText.value)+1;
            myText.value = num; 

    }

myText.onkeydown = function(e)
    {
    keyIs = "down";

    if(keyIs == "down")
        {
            var e = e || event ;
            if (e.keyCode == 38)
                {    
                    for(var s=0; s<1; s++)
                        setTimeoutId = setTimeout('myIncrementFunction()',100); 
                }
        }
    }

myText.onkeyup = function(e)
{ 
    keyIs = "up"; 
}

Upvotes: 0

Jas
Jas

Reputation: 1141

This is not fully tried and tested by me, but here is a thought - You might want to track KeyDown events because that's the event which is queued by the OS when the key is first pressed. You might also want to implement some sort of delay when incrementing this way so as not to overwhelm the client-side script and have numbers change at a speed to high for user to track.

Upvotes: 1

Related Questions