博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery控制回车使表单内控件获得焦点
阅读量:5877 次
发布时间:2019-06-19

本文共 1021 字,大约阅读时间需要 3 分钟。

hot3.png

<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();
   });

});

转载于:https://my.oschina.net/u/1866821/blog/317253

你可能感兴趣的文章
事件处理程序
查看>>
Sublime Text 3使用手册
查看>>
input file 美化
查看>>
DrawerLayout/FrameLayout/TabLayout/AppBarLayout/NestedScrolling
查看>>
Django之sitemap
查看>>
数据挖据之余弦相识度
查看>>
浅谈fetch
查看>>
js中定时器的使用
查看>>
前端不为人知的一面–前端冷知识集锦 原文地址(http://web.jobbole.com/83473/);...
查看>>
css ul随内容增加高度随之变大
查看>>
重写HttpModule机制
查看>>
PowerDesigner 15.2入门学习 二
查看>>
Android 实现卡片翻转的动画(翻牌动画)
查看>>
ZendStudio快捷键
查看>>
LinkedHashMap 和 LRU算法实现
查看>>
Quartz.NET 配置文件详解
查看>>
PIE SDK Command、Tool、Control的调用和拓展
查看>>
图片无缝轮播
查看>>
LeetCode Weekly Contest 23
查看>>
如何解决bib的一些问题
查看>>