2

私はjQueryを使用して自分のドロップボックスをカスタマイズしていますが、タブインデックスをどのように適用できるのか疑問に思っていました。

非表示の選択フォーカス/ぼかしイベントを使用しようとしましたが、機能しないようです。

また、カスタマイズドロップボックス（div）にtabindex属性を適用しようとしましたが、成功しませんでした。

誰かが私がこれを達成する方法を私に示すためのサンプルまたはリンクを持っていますか？

ありがとう

4

2 に答える 2

0

私はあなたが変数を持つことができると想像します-現在選択されているアイテム。ユーザーのキーボードイベントをキャッチし、対応するdivにクラスを追加/削除することで、現在選択されている項目を変更するだけです。Enterキーを押すと、現在選択されている項目に基づいて必要なイベントを呼び出します。

ある種の擬似コード：

var current = 0;

if(key = down){
    current++;
    currentElem.removeClass('active');
    currentElemen = currentElem.next();
    currentElem.addClass('active');
}

if(key = up){
    current--;
    currentElem.removeClass('active');
    currentElemen = currentElem.previous();
    currentElem.addClass('active');
}

if(key = enter){
    doStuff(current);
}

これがあなたにアイデアを与えることを願っています！

于 2011-12-14T14:25:38.687 に答える
0

私はあなたが何をしようとしているのか完全に理解しているかどうかはわかりませんが、おそらくこれはあなたが始めるのに役立つでしょう：http: //jsfiddle.net/2rCFV/1/

$(window).keydown(function(e){
    if(e.which === 9){ //tab
        var selected = $('.selected');
        selected.removeClass('selected');

        var tabIndex = +selected.attr('tabIndex') + 1; //plus sign at beginnign converts it to a number

        var next = selected.siblings('[tabIndex=' + tabIndex + ']');

        if(next.length > 0){ //if this element exists
            next.addClass('selected');
        }else{
            selected.siblings('[tabIndex=' + 1 + ']').addClass('selected'); //select the first one
        }

        e.preventDefault();
    }
});
于 2011-12-14T14:35:55.697 に答える