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        <script language="JavaScript" type="text/javascript">
 7            
 8            var elemType;//选中控件类型
 9            var elemObj; //选中控件对象
10            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("");
17                for(var i=0;i<len;i++){    
18                    //获取控件类型    
19                    elemType=elems[i].type;
20                    //若是列表中的类型控件则为其注册事件                                    
21                    if(elemTypeStr.indexOf(elemType)!=-1){
22                        //控件获得焦点后为全局变量赋值
23                        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即跳到下一控件                                                        
32                        elems[i].onkeydown=function(){
33                            if(event.keyCode==13)event.keyCode=9
34                        }
;                    
35                    }

36                }

37            }

38            //显示当前选中控件类型
39            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
posted on 2009-03-18 16:47  ilovejsj  阅读(222)  评论(0编辑  收藏  举报