防止箭头键更改选定的单选按钮答案

【问题标题】：Prevent arrow keys from changing selected radio button防止箭头键更改选定的单选按钮
【发布时间】：2014-11-16 08:20:45
【问题描述】：

我有几个单选按钮，我想阻止按向上/向下箭头键来更改选定的单选按钮。

如果您选择其中一个单选按钮，然后按向上/向下箭头键，它将选择上一个或下一个单选按钮。相反，我希望选择保持不变。为此，我可以在某些按键上使用event.preventDefault();。但是我仍然希望用户能够通过按箭头键在页面上上下滚动。

我该怎么做？

单选按钮：

<label>Value
    <input type="radio" name="myradiobtn" value="value1">
</label>
<label>Value
    <input type="radio" name="myradiobtn" value="value2">
</label>
<label>Value
    <input type="radio" name="myradiobtn" value="value3">
</label>
<label>Value
    <input type="radio" name="myradiobtn" value="value4">
</label>
<label>Value
    <input type="radio" name="myradiobtn" value="value5">  
</label>

Javascript 尝试（不工作）：

$(document).keydown(function(e) {
    var arrowKeys = [37,38,39,40];
    if (arrowKeys.indexOf(e.which) !== -1) {
        $('input[type="radio"]').each(function( index ) {
          $(this).blur();
        });
    }
});

JsFiddle：

http://jsfiddle.net/w0jh9ney/

【问题讨论】：

看看updated fiddle。
这种工作，但为了使用箭头键滚动，您首先必须手动取消选择单选按钮，这对于普通用户来说有点尴尬
你说得对——我忘了.blur()。 Corrected fiddle.
太棒了，谢谢。一个小问题：第一次上/下键不滚动（但这可以通过使用$(window).scrollTop() 模拟）只有后续的使页面滚动，但除此之外，这正是我的想法。如果您将其发布为答案，我会将其标记为已接受
我尝试了一些想法来解决这个问题，但没有成功。

标签： javascript jquery html

【解决方案1】：

这个想法是从input 中移除焦点并防止input keydown 事件处理程序中的默认行为：

Fiddle.

$('input[type="radio"]').keydown(function(e)
{
    var arrowKeys = [37, 38, 39, 40];
    if (arrowKeys.indexOf(e.which) !== -1)
    {
        $(this).blur();
        return false;
    }
});

@user3346601 提到在第一个 keydown 上不滚动的解决方法：

Fiddle.

$('input[type="radio"]').keydown(function(e)
{
    var arrowKeys = [37, 38, 39, 40];
    if (arrowKeys.indexOf(e.which) !== -1)
    {
        $(this).blur();
        if (e.which == 38)
        {
            var y = $(window).scrollTop();
            $(window).scrollTop(y - 10);
        }
        else if (e.which == 40)
        {
            var y = $(window).scrollTop();
            $(window).scrollTop(y + 10);
        }
        return false;
    }
});

【讨论】：

这个解决方案有一个问题：第一次上/下键不会向上或向下滚动页面，只有后续的向上/向下键才能滚动页面。要解决此问题，请在 $(this).blur(); 之后添加以下内容。地址：if (e.which == 38) { var y = $(window).scrollTop(); $(window).scrollTop(y-10); } if (e.which == 40) { var y = $(window).scrollTop(); $(window).scrollTop(y+10); }
@user3346601 好吧，是的，它会起作用，但我试图准确并为<body> 触发keydown 或keyup 事件，但它为什么不起作用。跨度>

【解决方案2】：

var disableArrowKeys = function(e){
    if($("input[type=radio]").is(':focus')){
        if(e.keyCode==37){
            e.preventDefault();
            window.scrollBy(-100, 0);
        }
        else if(e.keyCode==38){
            e.preventDefault();
            window.scrollBy(0, -100);
        }
        else if(e.keyCode==39){
            e.preventDefault();
            window.scrollBy(100, 0);
        }
        else if(e.keyCode==40){
            e.preventDefault();
            window.scrollBy(0, 100);
        }
    }
}
$(document).keydown(disableArrowKeys);

【讨论】：

感谢您发布您的答案！请在代码中附上解释以完整回答问题。

【解决方案3】：

我知道这是一个旧线程，但我认为在阅读了这里的所有 cmets 后我得到了一个简单的解决方案，这将使未来的访问者受益。正如 Regent 所说，“我们的想法是从输入中移除焦点”。因此，只需在单击后模糊焦点即可。

$('input:radio[name="myradiobtn"]').on('click', function() {
    $(this).blur();
})

【讨论】：