简化的enter转化成tab组件

  1<script language="JavaScript">   
  2<!--   
  3  
  4// 用途:enter 转化成tab   
  5//使用:onload ="initEnter2Tab()" form标记加上 <form name="frm" type="enter2tab">...</form>
  6
  7var isCycle = false; //当光标到最后一个元素的时候,是否循环光标焦点,   
  8var iCurrent = -1;   
  9var frmName = "0"//input_form   
 10//   
 11function enterToTab() //网页里按回车时焦点的转移   
 12{   
 13var e = document.activeElement;   
 14if(e == null) return false;   
 15//获得当前表单的名字   
 16for(i=0;i<document.forms.length;i++){   
 17for(var el in document.forms[i].elements){   
 18if(e.UniqueID == el.UniqueID){   
 19frmName = document.forms[i].name   
 20}   
 21}   
 22}   
 23if(window.event.keyCode == 13)   
 24{   
 25switch(e.tagName)//标签类型   
 26{   
 27case "INPUT":   
 28handleInput(e)   
 29break;   
 30case "SELECT":   
 31handleSelect(e)   
 32break;   
 33case "TEXTAREA":   
 34handleTextarea(e)   
 35break;   
 36default:   
 37//window.status = "未知的标签名称:"+e.tagName+",不能移动焦点!"   
 38}   
 39}// end if   
 40}   
 41//处理input 标签类型   
 42function handleInput(e)   
 43{   
 44switch(e.type)   
 45{   
 46case "text":   
 47case "password":   
 48case "checkbox":   
 49case "radio":   
 50case "file":   
 51moveFocusToNextElement(e)   
 52break;   
 53case "submit"://处理有提交按钮的情况   
 54case "button":   
 55if(isHandleSubmit(e)){   
 56handleSubmit(e)   
 57focusOnNextElement(document.forms[frmName].elements,iCurrent-1)   
 58break;   
 59}   
 60moveFocusToNextElement(e)   
 61break;   
 62default:   
 63}   
 64}   
 65//处理select 标签类型   
 66function handleSelect(e)   
 67{   
 68moveFocusToNextElement(e)   
 69}   
 70//处理textarea 标签类型   
 71function handleTextarea(e)   
 72{   
 73moveFocusToNextElement(e)   
 74}   
 75//移动到下一个元素   
 76function moveFocusToNextElement(e)   
 77{   
 78var oE = document.forms[frmName].elements, iCurentPos=-1;   
 79for(var i=0; i<oE.length; i++)   
 80{   
 81if(oE[i] == e) iCurentPos = i;   
 82if(iCurentPos>-1 && iCurentPos+1<oE.length)   
 83{   
 84//把焦点设置到下一个可用的元素上   
 85focusOnNextElement(oE,iCurentPos)   
 86}   
 87}   
 88}   
 89//下一个可用元素得到焦点 n 元素的位置   
 90function focusOnNextElement(oElements,iIndex)   
 91{   
 92var oE = oElements   
 93var oldIndex = iIndex   
 94while(oE[iIndex+1].type =="hidden" || oE[iIndex+1].disabled || oE[iIndex+1].readOnly == true || oE[iIndex+1].style.display == "none")   
 95{   
 96/*   
 97window.status += "e.name = "+oE[iIndex+1].name   
 98window.status += ";e.type = "+oE[iIndex+1].type   
 99window.status += ";e.disabled = "+oE[iIndex+1].disabled   
100window.status += ";e.readOnly = "+oE[iIndex+1].readOnly+"."   
101*/   
102iIndex++;   
103if(iIndex+1 == oE.length)   
104{   
105if(isCycle){//设置焦点在第一元素   
106focusOnNextElement(oE,-1)   
107}   
108return;   
109}   
110}//end while   
111iCurrent = iIndex+1   
112oE[iCurrent].focus();   
113window.event.keyCode = 0;   
114window.event.returnValue= false;   
115return;   
116}   
117//处理当前元素   
118function handleSubmit(element)   
119{   
120element.click()   
121return;   
122}   
123//判断是否处理提交   
124function isHandleSubmit(element)   
125{   
126var ret = false;   
127if(element !=null && (element.id.toUpperCase() == "SUBMIT" || element.name.toUpperCase() == "SUBMIT" || element.isSubmit)){   
128ret = true;   
129}   
130return ret;   
131}   
132//初始化 initEnter2Tab()   
133function initEnter2Tab()   
134{   
135for(i=0;i<document.forms.length;i++){   
136if(document.forms[i].type !=null && document.forms[i].type == "enter2tab"){   
137document.forms[i].onkeydown = function f(){enterToTab();};   
138}   
139}   
140//文档初始化焦点   
141if(document.forms[0].elements != null)   
142focusOnNextElement(document.forms[0].elements,-1)   
143} 
144
145//-->
146
147</script>
1<body onload="initEnter2Tab()">
2<form action="" method="post" name="aa" type="enter2tab">
3<input name="" type="text"/><input name="" type="text"/><input type="submit"/>
4</form></body>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus