увеличить число, когда я нажимаю клавишу со стрелкой на клавиатуре с JavaScript

Question

У меня в текстовом поле есть числовое значение.Теперь я хочу продолжать увеличивать это числовое значение, нажимая и удерживая любую из клавиш со стрелками.Я знаю, как это сделать, если я нажимал только один раз.оно будет увеличено только на 1.но что, если я хочу продолжать увеличивать значение, пока я держу клавиши со стрелками.как это сделать?

спасибо

Answer 1

Для этого есть небольшой плагин jQuery: https://github.com/nakupanda/number-updown

Использование:

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

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

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

$ ('# minMaxCircle'). Updown ({min:-10, макс .: 10, круг: true});

Просмотреть демонстрацию в режиме реального времени здесь: http://jsfiddle.net/XCtaH/embedded/result/

Поддержка событий клавиатуры и колесика мыши

Answer 2

Это не полностью опробовано и протестировано мной, но вот мысль: вы можете отслеживать события KeyDown, потому что это событие, которое ставится в очередь ОС при первом нажатии клавиши. При инкрементном увеличении может также потребоваться реализовать некоторую задержку, чтобы не перегружать сценарий на стороне клиента и не изменять номера со скоростью, слишком высокой для отслеживания пользователем.

Answer 3

хорошо, после некоторых тестов, которые я сделал, вот как это делается:

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"; 
}

Answer 4

Если вам не нужна поддержка Opera, это легко:

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

Однако Opera не запускает keydown для повторов клавиш ... вам придется подражать этому с помощьювызов incrementTextBox() с интервалом и остановка при нажатии клавиши.Я проверял это в WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, даже в IE Причуды:

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;
}