当我用javascript在键盘上按箭头键时增加数字答案

【问题标题】：increase number when I press arrow key on keyboard with javascript当我用javascript在键盘上按箭头键时增加数字
【发布时间】：2010-10-06 23:58:22
【问题描述】：

我有一个文本框有一个数值。现在我想要的是在按住任何箭头键的同时继续增加该数值。如果我只按一次，我知道该怎么做。它只会增加1。但是如果我想在按住箭头键的同时继续增加值怎么办。该怎么做？

谢谢

【问题讨论】：

标签： javascript increment arrow-keys

【解决方案1】：

有一个小的 jQuery 插件可以做到这一点： https://github.com/nakupanda/number-updown

用法：

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

$('#step').updown({ 步数：10，移步：100 });

$('#minMax').updown({ 分钟：-10，最大：10 });

$('#minMaxCircle').updown({ 分钟：-10，最大：10，圈子：真 });

在此处查看现场演示： http://jsfiddle.net/XCtaH/embedded/result/

支持键盘和鼠标滚轮事件

【讨论】：

【解决方案2】：

我没有完全尝试和测试过，但这里有一个想法 - 您可能想要跟踪 KeyDown 事件，因为这是第一次按下键时操作系统排队的事件。您可能还希望在以这种方式递增时实现某种延迟，以免使客户端脚本不堪重负，并使数字快速变化以供用户跟踪。

【讨论】：

onkeydown 确实可以工作，并且在任何情况下都不会“压倒性地”快速 - 按键只会以操作系统设置中设置的速率重复。

【解决方案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"; 
}

【讨论】：

【解决方案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 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;
}

【讨论】：

这就是我没有测试自己的答案所得到的。但是，它适用于 Opera！ :) 我将通过更正来编辑我的答案。

【解决方案5】：

我想这样做，我只是使用 type="number" 的输入字段

【讨论】：