我有几个单选按钮,我想阻止按向上/向下箭头键来更改所选的单选按钮。
如果您选择其中一个单选按钮,然后按向上/向下箭头键,它将选择上一个或下一个单选按钮。相反,我希望选择保持不变。为此我可以在某些按键上使用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:
答案 0 :(得分:6)
我们的目标是从input
中移除焦点并防止input
keydown
事件处理程序中的默认行为:
$('input[type="radio"]').keydown(function(e)
{
var arrowKeys = [37, 38, 39, 40];
if (arrowKeys.indexOf(e.which) !== -1)
{
$(this).blur();
return false;
}
});
@ user3346601提到的解决方法是不首先滚动keydown
:
$('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();
})