javascript单选框radio的tab禁用以及回车和tab键互换

原创于 2010-11-12 17:40:35 发布 · 672 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种在网页中禁用Tab键的方法，并通过JavaScript实现了键盘事件的监听和处理。对于Firefox浏览器使用addEventListener监听keypress事件，在IE浏览器中使用attachEvent监听onkeydown事件。当检测到用户按下Tab键时，将重新聚焦到下一个同名单选按钮或保持禁用状态。

部署运行你感兴趣的模型镜像



<script type="text/javascript">
if(document.addEventListener){//如果是Firefox
	document.addEventListener("keypress",fireFoxHandler, true);
}else{
	document.attachEvent("onkeydown",ieHandler);
}

function fireFoxHandler(evt){
	alert("不支持火狐");
}

function ieHandler(evt){
	if(evt.keyCode=="9"){//如果是tab键
		evt.keyCode="0";//则禁用tab
		evt.returnValue=false;

		var act = document.activeElement.name;//获取焦点
		if(document.activeElement.type=="radio" && act!=undefined && act!=""){//如果焦点在单选框
			document.activeElement.hasFocus = true;
			var af = document.getElementsByName(act);
			for(var i=0; i<af.length; i++){
				var j = (i+1) % af.length;
				if(af[i].hasFocus == true){
					af[i].hasFocus = false;
					af[i].blur();
					af[j].focus();
				}
			}
		} else {//其他情况tab键不禁用
			evt.keyCode="9";
			evt.returnValue=true;
		}
	} else if(evt.keyCode=="13"){
		evt.keyCode="9";
	}
}

</script>