当前位置：Gxlcms > JavaScript > javascript 回车键后跳到下一控件

javascript 回车键后跳到下一控件

时间：2021-07-01 10:21:17 帮助过：3人阅读

<!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 回车键后跳到下一控件

人气教程排行