Javascript 防止箭头键更改所选单选按钮

我有几个单选按钮，我想防止按下向上/向下箭头键来更改所选单选按钮

如果您选择一个单选按钮，然后按向上/向下箭头键，它将选择上一个或下一个单选按钮。相反，我希望选择保持不变。为此，我可以使用

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> 

JsFiddle：

这个想法是从
输入中移除焦点，并防止
输入中出现默认行为
按键式事件处理程序：


@user3346601提到了不在第一次按下键时滚动的变通方法
keydown
：


我知道这是一个古老的主题，但我认为在阅读了这里的所有评论之后，我得到了一个简单的解决方案，这将有利于未来的访问者。
正如Regent所说，“我们的想法是将焦点从输入中移除”。
因此，只需在点击后模糊焦点

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

看一看。这种方法很有效，但为了使用箭头键进行滚动，首先必须手动取消选择单选按钮，这有点尴尬，尤其是对于普通用户。你说得对-我忘记了
.blur（）
。太棒了，谢谢。一个小问题：第一次上/下键没有滚动（但这可以通过使用
$（window.scrollTop（）
）进行模拟），只有后续的键才能使页面滚动，但除此之外，这正是我的想法。如果您将其作为答案发布，我会将其标记为接受。我尝试了一些方法来解决此问题，但未成功。此解决方案有一个问题：第一次按向上/向下键不会向上或向下滚动页面，只有后续的向上/向下键才能使页面滚动。要解决此问题，请在
$（this）.blur（）之后添加以下内容。Add:
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是的，它会工作，但我试图准确地触发
或
的
keydup
事件，但是它为什么不起作用呢。谢谢你发布你的答案！请在完整回答问题的代码中附上解释。
$('input[type="radio"]').keydown(function(e)
{
    var arrowKeys = [37, 38, 39, 40];
    if (arrowKeys.indexOf(e.which) !== -1)
    {
        $(this).blur();
        return false;
    }
});

$('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;
    }
});

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);

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