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

时间:2014-09-22 11:20:55

标签: javascript jquery html

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

如果您选择其中一个单选按钮,然后按向上/向下箭头键,它将选择上一个或下一个单选按钮。相反,我希望选择保持不变。为此我可以在某些按键上使用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/

3 个答案:

答案 0 :(得分:6)

我们的目标是从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;
    }
});

答案 1 :(得分:0)

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

答案 2 :(得分:0)

我知道这是一个老线程,但我认为在阅读了所有有利于未来访问者的评论后,我得到了一个简单的解决方案。 正如Regent所说,“的想法是从输入中删除焦点”。 因此,只需点击一下即可模糊焦点。

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