2

一連のラジオ ボタンを矢印キーで自動的に選択せずにナビゲートできるようにすることは可能ですか? 現在、ユーザーがラジオ ボタンを選択したときに閉じたいポップアップがあり、.click() を使用していますが、矢印キーを使用してポップアップ内のラジオボタンをナビゲートすると、各ナビゲーションによってポップアップが閉じられ、ユーザーが再開します。
提案？
ありがとう！

編集: これは私のライブ デモです:
jsfiddle.net/TKWzH/4 お気に入り

$("#popup2 input:radio").bind('keydown keyCode == 13', 'mousedown' function () {
$('#popup2').css('display', 'none'); });

このようなもの？これは正しくなく、おそらく意味がないことはわかっていますが。

4

2 に答える 2

3

この動作は特定のブラウザに固有のものです。IE は矢印キーに基づいてラジオを選択するように見えますが、Chrome はそうではありません。

keydownつまり、 jQuery を介してイベントを防止することで、この動作を無効にすることができます。ドキュメント全体に適用されないように、DIV (またはラジオ ボタンをラップする他の要素) でこれを行うことをお勧めします。

$('div.wrap').keydown(function(e) {

    if (e.which > 36 && e.which < 41) {
        e.preventDefault();
    }

    var $checkedRadio = $('input[type=radio]:checked');
    if ($checkedRadio.size() > 0) {
        $checkedRadio.removeAttr('checked');
        if (e.which == 38 || e.which == 39) {
            var $nextRadio = $checkedRadio.next('input[type=radio]');
            if ($nextRadio.size() > 0) {
                $nextRadio.attr('checked', 'checked');
            } else {
                $('input[type=radio]:first').attr('checked', 'checked');
            }
        }
        else if (e.which == 37 || e.which == 40) {
            var $prevRadio = $checkedRadio.prev('input[type=radio]');
            if ($prevRadio.size() > 0) {
                $prevRadio.attr('checked', 'checked');
            }
            else {
                $('input[type=radio]:last').attr('checked', 'checked');
            }
        }
    }

});​

これを実現する別の方法があります。それは、どのキーが押されたかを追跡し、click() イベントで確認することです。

var keyPressed;

$('input').click(function(e) {
    if (keyPressed && keyPressed > 36 && keyPressed  < 41) {
        e.preventDefault();
        e.stopPropagation();
        // key pressed during click
    }
    else{
        // normal click
    }
});

$(document).keydown(function(e) {
    keyPressed = e.which;
});

$(document).keyup(function(e) {
    keyPressed = null;
});
于 2012-07-06T21:59:59.347 に答える
0

これは、@derek-hunziker によって与えられた 2 番目の例と同様に、イベント レベルで動作する、より一般化されたクロス ブラウザー ソリューションです。

$(function() {
    var navKey, getCheck;
    $('input[type=radio]').keydown(function(e) {
        navKey = (e.which >= 37 && e.which <= 40);
        if (navKey) {
            getCheck = $("input:radio[name='" + e.target.name + "']:checked")[0];
        } else if (e.which == 13) {$(e.target).click();}
    }).keyup(function(e) {
        navKey = null;
        getCheck = null;
    }).click(function(e) {
        if (navKey) {
            e.preventDefault();
            e.stopPropagation();
            if (getCheck) {getCheck.checked = true;}
            else {e.target.checked = false;}
        } else {
            // Perform intended click/space/enter action here
        }
    });
});

この変更は、デフォルト値がない場合に最初のナビゲーション移動で要素が選択される Chrome の問題と、移動するたびにナビゲーションが現在の選択を空白にする Internet Explorer の問題に対処します。また、Enter キーでクリック イベントをトリガーすることもできますが、この機能は、keydown イベントの「else if」ステートメントを削除することで無効にすることができます。

著者の質問が必要とするよりも複雑ですが、一般的な使用のために複数のブラウザー間でより信頼性の高いエクスペリエンスを提供します.

于 2014-06-13T21:36:21.830 に答える