2

是否可以这样做，以便我可以使用箭头键浏览一组单选按钮而不自动选择它们？我目前有一个弹出窗口，当用户选择单选按钮并且我正在使用.click（）时，我想关闭它，但是当您使用箭头键导航弹出窗口中的单选按钮时，每个导航都会导致弹出窗口关闭并且用户拥有重新打开它。
建议？
谢谢！

编辑：这是我的现场演示：jsfiddle.net/TKWzH/4
真实的东西比打开和关闭功能要多得多，那么有没有办法将keydown enter和mousedown合二为一？喜欢

$("#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 给出的第二个示例

$(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 键触发 click 事件，尽管可以通过删除 keydown 事件中的“else if”语句来禁用此功能。

虽然比作者的问题要求的更复杂，但它提供了跨多个浏览器的更可靠的体验，以供一般使用。

于 2014-06-13T21:36:21.830 回答