2

選択した要素のタブ ナビゲーションを制限するコードをいくつか作成しました。ここで完全なコードの動作を確認できます: http://jsfiddle.net/M2ELL/2/正常に動作しています。

問題は、フォーカスが発生する親 div を「装飾」したいということです。さらに言えば、これらのイベントリスナーを作成しました：

$('[data-mymodaltabindex]').blur(function () {        
   $(this).parent().removeClass('highlight');
   console.log('blur ' + $(this));
});

$('[data-mymodaltabindex]').focus(function () {
   $(this).parent().addClass('highlight');
   console.log('highlight ' + $(this));
});

親 div ごとに入力が 1 つしかない場合、これらは期待どおりに機能します。一方、親 div ごとに 2 つの入力がある場合 (私の例の 2 つのラジオのように)、フォーカス イベントは常にぼかしイベントの前に発生します。結果は強調表示され、div の強調表示が削除されます。これは、私が望む反対です。

ハイライトを削除してからハイライトする前にぼかしイベントを発生させたいと思います。どうすればそれを達成できますか? この場合、フォーカス イベントが常にブラー イベントの前に発生するのはなぜですか?

完全なコード:

<div>
    radio 1
    <input type="radio" data-mymodaltabindex="1" />
    radio 2
    <input type="radio" data-mymodaltabindex="2" />
</div>
<div>
    text
    <input type="text" data-mymodaltabindex="3" />
</div>

$('[data-mymodaltabindex]').on('keydown', function (e) {
    if (e.keyCode == 9 || e.which == 9) {
        // define variables
        var mytabindex = null;
        var maximum = null;
        var minimum = null;
        var next = null;
        var previous = null;
        var values = new Array();
        // set mytabindex on the actual focused control
        var mytabindex = $(this).attr('data-mymodaltabindex');
        // put every visible mytabindex into array
        $('[data-mymodaltabindex]:visible').each(function () {
            values.push(parseInt($(this).attr('data-mymodaltabindex')));
        });
        //console.log(values);
        // look for maximum minimum mytabindex 
        // for maximum and minimum we filter out null values 
        // as they are interpreted as 0 with math functions
        maximum = Math.max.apply(null, values.filter(function (val) { return val !== null }));
        minimum = Math.min.apply(null, values.filter(function (val) { return val !== null }));
        // set next and previous using function
        next = getModalClosestHighValue(values, mytabindex);
        previous = getModalClosestLowValue(values, mytabindex);
        // go back to begining / end if 
        // end / begining is reached
        if (!previous) { previous = maximum; }
        if (!next) { next = minimum; }
        // check if there is shift combination
        if (e.shiftKey) {
            mytabindex = previous; // focus on the previous item
        } else {
            mytabindex = next; // focus on the next item
        }
        // focus on this element
        $('[data-mymodaltabindex=' + mytabindex + ']').focus();
        console.log('focus set to [data-mymodaltabindex=' + mytabindex + ']');
        // stop propagation
        return false;
    }
});

function getModalClosestHighValue(a, x) {
    var hi;
    for (var i = a.length; i--; ) {
        if (a[i] > x && (hi === undefined || hi > a[i])) hi = a[i];
    };
    return hi;
}

function getModalClosestLowValue(a, x) {
    var lo;
    for (var i = a.length; i--; ) {
        if (a[i] < x && (lo === undefined || lo < a[i])) lo = a[i];
    };
    return lo;
}
4

1 に答える 1

1

これは、jQuery 1.9 を使用することで解決できる、いくつかの jQuery バージョンのバグであることが判明しました。

1.9 で動作: http://jsfiddle.net/7mfLb/

1.8.3 では動作しません: http://jsfiddle.net/dHwE5/

1.7.2 で動作させたい場合は、次の回避策を提案します。

$('[data-mymodaltabindex]').on('blur focus', function() {
   var $p = $(this).parent();
   $p.removeClass('highlight');
   setTimeout(function() {
      $('div :has(:focus)', $p.parent()).addClass('highlight');
   }, 0);
});

デモンストレーション

于 2013-01-23T10:13:38.447 に答える