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需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序view与scroll-view组件的使用介绍
小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构，这篇文章主要介绍了微信小程序view与scroll-view组件的使用
2022-10-10
JS实现复选框的全选和批量删除功能
本文主要介绍了JS实现复选框的全选和批量删除功能的方法代码。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
JavaScript设计模式--简单工厂模式定义与应用案例详解
这篇文章主要介绍了JavaScript设计模式--简单工厂模式定义与应用,结合具体案例形式详细分析了JavaScript设计模式中简单工厂模式基本概念、定义、用法与相关注意事项,需要的朋友可以参考下
2020-05-05
JavaScript使用sort函数实现汉字排序
JavaScript中的sort函数是一个强大且多用途的工具,能够对数组的元素进行排序,而汉字按照拼音排序又是一个常见需求,下面我们就来看看如何使用JavaScript实现汉字排序吧
2023-12-12
简单的js计算器实现
这篇文章主要为大家详细介绍了如何实现简单js计算器的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
这篇文章主要介绍了谈谈我对JavaScript原型和闭包系列理解(随手笔记9)的相关资料,需要的朋友可以参考下
2015-12-12
JavaScript对数字的判断与处理实例分析
这篇文章主要介绍了JavaScript对数字的判断与处理方法,实例分析了javascript判断数字的常见方法与针对数字处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-02-02
Taro小程序自定义顶部导航栏功能的实现
这篇文章主要介绍了Taro小程序自定义顶部导航栏功能的实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-12-12
JS组件Bootstrap dropdown组件扩展hover事件
bootstrap的下拉组件，需要点击click时，方可展示下拉列表。因此对于喜欢简单少操作的大家来说，点击一下多少带来不便，因此，引入hover监听，鼠标经过自动展示下拉框。这篇文章主要介绍了JS组件Bootstrap dropdown组件扩展hover事件，感兴趣的小伙伴们可以参考一下
2016-04-04
Bootstrap栅格系统简单实现代码
这篇文章主要为大家详细介绍了Boostrap栅格系统的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03