0

私は、数値を取得する多数のテキスト入力があり、それぞれにインクリメント/デクリメント ボタンのペアがある調査があります。私は次のような作業機能を持っています:

HTML:

<div class="text-input-wrapper">
    <input type="text" />
    <div class="buttons inc-dec">
        <button class="increment">Increment</button>
        <button class="decrement">Decrement</button>
    </div>
</div>

function incDec(btnClass)   {

    var input       = $(this).closest('.text-input-wrapper').find('input');
    var inputVal    = $(this).closest('.text-input-wrapper').find('input').val();

    if ($(this).hasClass('increment')) {
        if (inputVal.length == 0) {
            ($(input).val('1'));
        }
        else {
            inputVal++;
            $(input).val(inputVal);
        }
    } // increment

    else if ($(this).hasClass('decrement')) {
        if (inputVal.length == 0) {
            ($(input).val('0'));
        }
        else {
            inputVal--;
            $(input).val(inputVal);
        }
    } // decrement

    return false;

} // function incDec

ここで、UP キーと DOWN キーを使用して値の増減を有効にする必要があります。私は次のように突き刺しましたが、喜びはありませんでした：

$(document).keydown( function(eventObject) {
    // UP arrow
    if(eventObject.which==38) {
        var btnClass = "increment";
    } else

    // DOWN arrow
    if(eventObject.which==40) {
        var btnClass = "decrement";
    }
    incDec(btnClass);

アップ/ダウンキーを使用してインクリメント/デクリメントを起動する方法について、いくつかの説明をいただければ幸いです。

よろしくお願いします。

svs

4

2 に答える 2

2

あなたの問題は、incDec関数がクラスを入力パラメーターとして受け取るように設計されていないことです-イベントを呼び出すオブジェクト（つまり、ボタンのクリックイベント）を使用します。

少しハックですが、以下のようなものはいかがですか？クリック ハンドラーを各ボタンに割り当ててから、関連するボタンのクリック イベントを呼び出します。

$( function ( ) {
    $('button').click( incDec );

    $('input').keydown( function(eventObject) {

        // UP arrow
        if(eventObject.which==38) {
            var btnClass = "increment";
        } else

        // DOWN arrow
        if(eventObject.which==40) {
            var btnClass = "decrement";
        }

        // Invoke the click event for the inc/dec button inside the containing div.
        $('button.'+btnClass, $(this).parent( )).click( );
    });
});

このようなボックスが 2 つある jsfiddle を次に示します。テキストボックス内で上下矢印キーを使用すると、正しく増減します。http://jsfiddle.net/zJBEN/

于 2012-10-23T16:11:23.750 に答える
1

これを試して：

$(document).keypress( function(eventObject) {
    var key = (eventObject.keyCode ? eventObject.keyCode : eventObject.which);
    if(key==38) {
        var btnClass = "increment";
    } else
    // DOWN arrow
    if(key==40) {
        var btnClass = "decrement";
    }
    incDec(btnClass);
});
于 2012-10-23T16:11:10.663 に答える