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

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 100 ::
收藏到网摘: 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