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

Question

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

Спасибо

Answer 1

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

Обычаи:

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

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

$ ('# minMax'). updown ({мин: -10, макс: 10});

$ ('# minMaxCircle'). updown ({мин: -10, макс: 10, круг: истина});

Посмотреть демо-версию здесь: 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();
    }
}

Тем не менее, Опера не стреляет keydown для повторений клавиш... вам придется подражать, позвонив incrementTextBox() с интервалом и останавливается, когда ключ поднят. Я проверил это в WebKit (Chrome 6.0), FF3, Opera 10.6, IE7, IE8, IE9, даже 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;
}

Answer 5

Я хотел сделать это, я просто использовал поле ввода с type="number"