按回车键后跳到下一控件

最新推荐文章于 2019-10-27 13:08:54 发布

ilovejsj001

最新推荐文章于 2019-10-27 13:08:54 发布

阅读量958

点赞数

分类专栏： javascript 文章标签： function button input javascript html c

本文链接：https://blog.csdn.net/ilovejsj001/article/details/4001701

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>按回车键后跳到下一控件</title>
  <script language="JavaScript" type="text/javascript">

   var elemType;//选中控件类型
   var elemObj; //选中控件对象
   function enterKey() {
    //获取页面所有控件
    var elems = document.forms[0].elements;
    var len=elems.length;
    //设置回车键跳跃的控件类型
    var elemTypeAry =["text","textarea","select-one","button","radio","checkbox"];
    var elemTypeStr=elemTypeAry.join("");
    for(var i=0;i<len;i++){
     //获取控件类型
     elemType=elems[i].type;
     //若是列表中的类型控件则为其注册事件
     if(elemTypeStr.indexOf(elemType)!=-1){
      //控件获得焦点后为全局变量赋值
      elems[i].οnfοcus=function(){
       //若当前按钮为typeBtn则不为其注册onfocus事件
       if(this.id=="typeBtnId")return;
       //获得当前控件类型
       elemType=this.type;
       //获得当前控件对象
       elemObj=this;
      }
      //若按键为Enter则改为Tab即跳到下一控件
      elems[i].οnkeydοwn=function(){
       if(event.keyCode==13)event.keyCode=9
      };
     }
    }
   }
   //显示当前选中控件类型
   function getType(){
    alert(elemType);
    //由于点击按钮后按钮获得焦点所需要将焦点重置为之前的控件上
    elemObj.focus();
   }
  </script>
</head>
<body>
  <form id="testForm">
   
   <input type="button" name="queryBtn" value="queryBtn" οnclick="enterKey()">
   
   <input type="button" name="typeBtn" id="typeBtnId" value="typeBtn" οnclick="getType()">
    <br>
   <select id="sel" style="width:150px">
    <option value="1">123</option>
    <option value="2">456</option>
   </select>
   <input type="text" id="a">
   <input type="text" id="b">
   <input type="text" id="c">
   <br>
   <textarea rows="5" cols="10" id="taId"></textarea>
   <input type="radio" name="radiongroup" id="aRd">
   <input type="radio" name="radiongroup" id="bRd">
   <input type="checkbox" id="aCb">
  </form>
</body>
</html>

ilovejsj001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按回车键后跳到下一控件

http://www.w3.org/TR/html4/strict.dtd"> 按回车键后跳到下一控件 var elemType;//选中控件类型 var elemObj; //选中控件对象 function enterKey() { //获取页面所有控件 var elems = document.forms[0].elements;
复制链接

扫一扫