Question

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

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

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

这样的东西？虽然我意识到这是不正确的，但可能毫无意义。

Answer 1

此行为特定于某些浏览器。 IE似乎基于箭头键选择无线电，而Chrome则不然。

也就是说，您可以通过jQuery阻止keydown事件来禁用此行为。我建议在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;
});

Answer 2

这是一个更通用的跨浏览器解决方案，可以在事件级别上运行，类似于@ 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中的另一个问题导致导航在每次移动时消除当前选择。它还允许通过回车键触发click事件，但是可以通过删除＆＃34; else if＆＃34;来禁用此功能。在keydown活动中的陈述。

虽然比作者的问题要复杂得多，但它可以在多种浏览器中提供更可靠的体验，以供一般使用。

使单选按钮避免使用键盘导航进行选择？

2 个答案: