阻止箭头键更改选定的单选按钮
Prevent arrow keys from changing selected radio button
本文关键字:单选按钮 更新时间:2023-09-26
我有几个单选按钮,我想阻止按下上/下箭头键来更改所选单选按钮。
如果您选择其中一个单选按钮,然后按下向上/向下箭头键,它将选择上一个或下一个单选键。相反,我希望选择保持不变。为此,我可以在某些按键上使用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();
});
}
});
Js报价:
http://jsfiddle.net/w0jh9ney/
这个想法是从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;
}
});
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);
我知道这是一个老话题,但我想在阅读了这里的所有评论后,我得到了一个简单的解决方案,这将有利于未来的访问者。正如Regent所说,"这个想法是从输入中移除焦点"。所以点击后模糊焦点即可。
$('input:radio[name="myradiobtn"]').on('click', function() {
$(this).blur();
})
相关文章:
- 多个单选按钮组相互干扰
- 是否可以禁用jquery中的单个单选按钮
- Javascript:无法获取变量中的单选按钮值
- 通过ajax到php文件获取单选按钮值
- 互斥单选按钮和相应的输入字段
- 用于选择MVC3中单选按钮值的JavaScript
- 如何获取单选按钮的多个实例的选定单选按钮值
- react testUtils模拟点击单选按钮而不触发onchange
- 当选择组中的单选按钮时,jQuery addClass
- Angularjs无法将单选按钮与嵌套范围内的模型绑定
- 客户端单选按钮列表验证
- Javascript:图像与单选按钮的值不匹配
- 如何在Javascript中将单选按钮值保存到cookie中
- 单击时如何更改单选按钮的CSS
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 注入Javascript以选择具有指定值的所有单选按钮
- 复选框/单选按钮-添加所选项目的总价
- 如何使用单选按钮设置cookie值
- Html按钮点击事件未触发单选按钮
- Javascript:单选按钮,并显示基于vaule的图像