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

简介:

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

});

 

 

目录
相关文章
|
24天前
|
安全 JavaScript 数据安全/隐私保护
jQuery会员中心安全修改表单特效
jQuery实现的会员中心安全修改表单特效代码是一款实现了可以修改登录密码,交易密码,手机号码,实名认证,电子邮箱,安全设置表单,会员表单等设置效果的代码
14 4
jQuery会员中心安全修改表单特效
|
6月前
|
JavaScript 前端开发
JQuery显示和隐藏控件
JQuery显示和隐藏控件
33 0
|
6月前
|
JavaScript 前端开发
前端基础 -JQuery之 表单选择器
前端基础 -JQuery之 表单选择器
26 0
|
2月前
|
JavaScript 前端开发 数据格式
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
2022年11月23日——jQuery——T1(基础选择器与表单选择器)
44 0
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
30 0
|
10月前
|
JavaScript 前端开发
Form表单利用Jquery Validate验证以及ajax提交
Form表单利用Jquery Validate验证以及ajax提交
50 0
|
JavaScript API
如何使用jQuery处理表单元素?底层原理是什么?
如何使用jQuery处理表单元素?底层原理是什么?
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
120 0
【jquery Ajax 】form表单教学+评论案例
|
编解码 前端开发 JavaScript
jquery form表单.serialize()序列化后中文乱码问题原因及解决
jquery form表单.serialize()序列化后中文乱码问题原因及解决
493 0
|
JavaScript
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
218 0
关于JQuery validate表单校验插件对级联下拉框的校验问题