javascript - javascriptでキーボードの矢印キーを押すと数字が増えます

Question

テキストボックスに数値があります。今私が欲しいのは、矢印キーのいずれかを押したまま、その数値を増やし続けることです。一度だけ押すと、これを行う方法を知っています。1だけ増加します。しかし、矢印キーを押している間、値を増やし続けたい場合はどうなりますか。どうやってするか？

ありがとう

Answer 1

これを行うための小さな jQuery プラグインがあります: https://github.com/nakupanda/number-updown

用途:

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

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

$('#minMax').updown({ 最小: -10, 最大: 10 });

$('#minMaxCircle').updown({ 最小: -10、最大: 10、円: true });

ここでライブデモを見る: http://jsfiddle.net/XCtaH/embedded/result/

キーボードおよびマウスホイール イベントのサポート

Answer 2

これは私が完全に試してテストしたわけではありませんが、ここに考えがあります-キーが最初に押されたときにOSによってキューに入れられるイベントであるため、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 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" の入力フィールドを使用しました