javascript 回车键后跳到下一控件

更新时间：2009年03月19日 00:35:58 作者：

按回车键后跳到下一控件的js代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>按回车键后跳到下一控件</title> <script language="JavaScript" type="text/javascript"> var elemType;//选中控件类型 var elemObj; //选中控件对象 function enterKey() { //获取页面所有控件 var elems = document.forms[0].elements; var len=elems.length; //设置回车键跳跃的控件类型 var elemTypeAry =["text","textarea","select-one","button","radio","checkbox"]; var elemTypeStr=elemTypeAry.join(""); for(var i=0;i<len;i++){ //获取控件类型 elemType=elems[i].type; //若是列表中的类型控件则为其注册事件 if(elemTypeStr.indexOf(elemType)!=-1){ //控件获得焦点后为全局变量赋值 elems[i].onfocus=function(){ //若当前按钮为typeBtn则不为其注册onfocus事件 if(this.id=="typeBtnId")return; //获得当前控件类型 elemType=this.type; //获得当前控件对象 elemObj=this; } //若按键为Enter则改为Tab即跳到下一控件 elems[i].onkeydown=function(){ if(event.keyCode==13)event.keyCode=9 }; } } } //显示当前选中控件类型 function getType(){ alert(elemType); //由于点击按钮后按钮获得焦点所需要将焦点重置为之前的控件上 elemObj.focus(); } </script> </head> <body> <form id="testForm">  <input type="button" name="queryBtn" value="queryBtn" onclick="enterKey()">  <input type="button" name="typeBtn" id="typeBtnId" value="typeBtn" onclick="getType()">  <select id="sel" style="width:150px"> <option value="1">123</option> <option value="2">456</option> </select> <input type="text" id="a"> <input type="text" id="b"> <input type="text" id="c">  <textarea rows="5" cols="10" id="taId"></textarea> <input type="radio" name="radiongroup" id="aRd"> <input type="radio" name="radiongroup" id="bRd"> <input type="checkbox" id="aCb"> </form> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JavaScript实现16进制颜色值转RGB的方法
这篇文章主要介绍了JavaScript实现16进制颜色值转RGB的方法,是javascript比较典型的数值转换应用技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
JS触摸事件、手势事件详解
本篇文章主要介绍了JS触摸事件、手势事件详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
基于layui的下拉列表的数据回显方法
今天小编就为大家分享一篇基于layui的下拉列表的数据回显方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript数组合并的8种常见方法小结
项目过程中经常会遇到 JS 数组合并的情况,时常为这个纠结,这里整理一下,下面这篇文章主要给大家介绍了关于JavaScript数组合并的8种常见方法,需要的朋友可以参考下
2022-11-11
原生JS实现的轮播图功能详解
这篇文章主要介绍了原生JS实现的轮播图功能,结合实例形式分析了javascript实现轮播图的原理、操作技巧与相关注意事项,需要的朋友可以参考下
2018-08-08
javascript检测移动设备横竖屏
移动端的开发过程中，免不了要判断横竖屏，然后在执行其他操作，比如分别加载不同样式，横屏显示某些内容，竖屏显示其他内容等等。
2016-05-05
用javascript获得地址栏参数的两种方法
用javascript获得地址栏参数的两种方法...
2006-11-11
JS组件Bootstrap实现图片轮播效果
这篇文章主要为大家详细介绍了JS组件Bootstrap实现图片轮播效果的具体代码，对图片轮播效果感兴趣的小伙伴们可以参考一下
2016-05-05
js String.prototype.trim字符去前后空格的扩展
这篇文章主要介绍了js String.prototype.trim字符去前后空格的扩展,需要的朋友可以参考下
2020-04-04
如何让每个Http请求都自动带上token
这篇文章主要介绍了如何让每个Http请求都自动带上token问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03