简化的enter转化成tab组件

/*******************************************
*
* 作者: dbpeng
* 用途:enter 转化成tab
* 使用:onload ="initEnter2Tab()" form标记加上 <form name="frm" type="enter2tab">...</form>
*
*/
var isCycle = false; //当光标到最后一个元素的时候,是否循环光标焦点,
var iCurrent = -1;
var frmName = "0"//input_form
//
function enterToTab()  //网页里按回车时焦点的转移
{
  var e = document.activeElement;
  if(e == null) return false;
  //获得当前表单的名字
  for(i=0;i<document.forms.length;i++){  
 for(var el in document.forms[i].elements){
  if(e.UniqueID == el.UniqueID){
   frmName = document.forms[i].name
  }    
 } 
  }
  if(window.event.keyCode == 13)
  { 
   switch(e.tagName)//标签类型
 {
     case "INPUT":
   handleInput(e)
   break;
     case "SELECT":
   handleSelect(e)   
   break; 
     case "TEXTAREA":
   handleTextarea(e)
   break;   
         default:  
    //window.status = "未知的标签名称:"+e.tagName+",不能移动焦点!"
    }  
  }// end if
}
//处理input 标签类型
function handleInput(e)
{
   switch(e.type)
 {
     case "text":
  case "password":
  case "checkbox":
  case "radio":
  case "file":
   moveFocusToNextElement(e)
   break;
  case "submit"://处理有提交按钮的情况
  case "button":
   if(isHandleSubmit(e)){
    handleSubmit(e)
    focusOnNextElement(document.forms[frmName].elements,iCurrent-1)
    break;
   }
   moveFocusToNextElement(e)
   break;           
         default:  
    }
}
//处理select 标签类型
function handleSelect(e)
{
 moveFocusToNextElement(e)
}
//处理textarea 标签类型
function handleTextarea(e)
{
 moveFocusToNextElement(e)
}
//移动到下一个元素
function moveFocusToNextElement(e)
{
  var oE = document.forms[frmName].elements, iCurentPos=-1;
  for(var i=0; i<oE.length; i++)
  {
    if(oE[i] == e) iCurentPos = i;
    if(iCurentPos>-1 && iCurentPos+1<oE.length)
    {
    //把焦点设置到下一个可用的元素上  
  focusOnNextElement(oE,iCurentPos)
    }
  }
}
//下一个可用元素得到焦点 n 元素的位置
function focusOnNextElement(oElements,iIndex)
{
 var oE = oElements
 var oldIndex = iIndex 
  while(oE[iIndex+1].type =="hidden" || oE[iIndex+1].disabled || oE[iIndex+1].readOnly == true || oE[iIndex+1].style.display == "none")
  { 
   /*
   window.status += "e.name = "+oE[iIndex+1].name
   window.status += ";e.type = "+oE[iIndex+1].type
   window.status += ";e.disabled = "+oE[iIndex+1].disabled
   window.status += ";e.readOnly = "+oE[iIndex+1].readOnly+"."
   */
   iIndex++;
   if(iIndex+1 == oE.length)
   {
    if(isCycle){//设置焦点在第一元素
     focusOnNextElement(oE,-1)
    }    
    return;
   }   
  }//end while
  iCurrent = iIndex+1
  oE[iCurrent].focus();
        window.event.keyCode    = 0;
        window.event.returnValue= false;
        return;
}
//处理当前元素
function handleSubmit(element)
{
 element.click()
 return; 
}
//判断是否处理提交
function isHandleSubmit(element)
{
 var ret = false;
 if(element !=null && (element.id.toUpperCase() == "SUBMIT" || element.name.toUpperCase() == "SUBMIT" || element.isSubmit)){
  ret = true;
 }
 return ret; 
}
//初始化 initEnter2Tab()
function initEnter2Tab()
{
 for(i=0;i<document.forms.length;i++){
  if(document.forms[i].type !=null && document.forms[i].type == "enter2tab"){
   document.forms[i].onkeydown = function f(){enterToTab();};
  }
 }
 //文档初始化焦点
 if(document.forms[0].elements != null)
  focusOnNextElement(document.forms[0].elements,-1)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值