按回车键后跳到下一控件(原创)

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
 2 < html >
 3      < head >
 4          < meta  http-equiv ="Content-Type"  content ="text/html; charset=iso-8859-1" >
 5          < title > Untitled Document </ title >
 6 ExpandedBlockStart.gifContractedBlock.gif         < script  language ="JavaScript"  type ="text/javascript" >
 7            
 8            var elemType;//选中控件类型
 9            var elemObj; //选中控件对象
10ExpandedSubBlockStart.gifContractedSubBlock.gif            function enterKey() {
11                //获取页面所有控件
12                var elems = document.forms[0].elements;            
13                var len=elems.length;
14                //设置回车键跳跃的控件类型
15                var elemTypeAry =["text","textarea","select-one","button","radio","checkbox"];    
16                var elemTypeStr=elemTypeAry.join("");
17ExpandedSubBlockStart.gifContractedSubBlock.gif                for(var i=0;i<len;i++){    
18                    //获取控件类型    
19                    elemType=elems[i].type;
20                    //若是列表中的类型控件则为其注册事件                                    
21ExpandedSubBlockStart.gifContractedSubBlock.gif                    if(elemTypeStr.indexOf(elemType)!=-1){
22                        //控件获得焦点后为全局变量赋值
23ExpandedSubBlockStart.gifContractedSubBlock.gif                        elems[i].onfocus=function(){
24                            //若当前按钮为typeBtn则不为其注册onfocus事件
25                            if(this.id=="typeBtnId")return;
26                            //获得当前控件类型
27                            elemType=this.type;    
28                            //获得当前控件对象
29                            elemObj=this;                        
30                        }

31                        //若按键为Enter则改为Tab即跳到下一控件                                                        
32ExpandedSubBlockStart.gifContractedSubBlock.gif                        elems[i].onkeydown=function(){
33                            if(event.keyCode==13)event.keyCode=9
34                        }
;                    
35                    }

36                }

37            }

38            //显示当前选中控件类型
39ExpandedSubBlockStart.gifContractedSubBlock.gif            function getType(){            
40                alert(elemType);
41                //由于点击按钮后按钮获得焦点所需要将焦点重置为之前的控件上
42                elemObj.focus();                
43            }
        
44        
</ script >
45      </ head >
46      < body >
47          < form  id ="testForm" >
48              <!--  为页面控件注册事件  -->                         
49              < input  type ="button"  name ="queryBtn"  value ="queryBtn"  onclick ="enterKey()" >
50              <!--  获取页面控件类型  -->
51              < input  type ="button"  name ="typeBtn"  id ="typeBtnId"  value ="typeBtn"  onclick ="getType()" >
52               < br >
53              < select  id ="sel"  style ="width:150px" >
54                  < option  value ="1" > 123 </ option >
55                  < option  value ="2" > 456 </ option >
56              </ select >         
57              < input  type ="text"  id ="a" >
58              < input  type ="text"  id ="b" >     
59              < input  type ="text"  id ="c" >
60              < br >
61              < textarea  rows ="5"  cols ="10"  id ="taId" ></ textarea >
62              < input  type ="radio"  name ="radiongroup"  id ="aRd" >
63              < input  type ="radio"  name ="radiongroup"  id ="bRd" >
64              < input  type ="checkbox"  id ="aCb" >             
65          </ form >
66      </ body >
67 </ html >
68

转载于:https://www.cnblogs.com/ilovejsj/archive/2009/03/18/1415627.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值