侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

jQuery控制回车使表单内控件获得焦点

2023-12-01 星期五 / 0 评论 / 0 点赞 / 42 阅读 / 2740 字

<script type="text/javascript" src="jquery-1.4.4.min.js"></script><script type="text/javascript"> $(

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">

$(function(){
       var length = $(":input").length;
       $(":input").keyup(function(e) {
       var key = e.which;
       if (13 == key) {
       var index = $(":input").index(this);
       var newIndex = index + 1;
       if(length == newIndex)
       {
            newIndex = 0;
       }
       $(":input:eq(" + newIndex + ")").focus();
       }
   });
});

</script>
</head>
<body>
 <form id="frm1">
           <input type="text" /><br/>
    <input type="text" /><br/>
    <select>
       <option>选项一</option>
       <option>选项二</option>
    </select>
    <br/>
    <input id="btn" type="button" value="提交" />
 </form>
</body>

 

注意点

①$(":input")表示表单内所有的控件,区别于$("input")只拿到input标签,拿不到select等。
②index函数是jQuery中很有用的一个函数。


但实际情况中我们并不一定要循环获得焦点,当提交按钮获得焦点的时候,我们就提交表单。

$(function(){
    $(":input").keyup(function(e) {
     var key = e.which;
     if (13 == key) {
          var index = $(":input").index(this);
          var newIndex = index + 1;
          $(":input:eq(" + newIndex + ")").focus();
      }
   });

   $("#btn").click(function(){
       $("frm1").submit();
   });

});


广告 广告

评论区