当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 简化的enter转化成tab组件

HTML/XHTML教程
CSS 循序渐进(四)表里春秋
精通 CSS 滤镜(五)
让css使网页图片半透明
实现页面图片阴影特效
发现CSS控件的好处
用CSS缩写给你的网站加速
CSS在IE和Nascape的显示差别
利用CSS,不通过replace替换标引HTML标记
拒绝单调 让网页超链接拥有多姿多彩的下划线
对CSS类及id的规范化命名
利用css里expression来实现界面对象的批量控制
利用CSS控制打印
第一章 CSS的基本认识
第二章 CSS的应用方式
第三章 CSS的应用补充
第四章 颜色背景的CSS
第五章 文字性质的CSS
第六章 区块性质的CSS
HTML之其他标记
HTML之链接标记

HTML/XHTML教程 中的 简化的enter转化成tab组件


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 104 ::
收藏到网摘: n/a

<script language="JavaScript">
<!--

// 用途: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= fal