javascript 回車鍵后跳到下一控件

2019-11-21 01:26:48

字體：大中小

來源：轉載

供稿：網友

<!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 IE7 瀏覽器本地圖片預覽

下一篇：js no-repeat寫法背景不重復