JQuery实现回车代替Tab键

转载 2015年07月01日 10:56:49

总结:

获取表单中的所有输入框inputs,通过inputs.index(this)获取当前焦点输入框所处的位置idx,不是最后一个输入框时为下一个输入框设置焦点。

 

对于一个网页上的表单,放置了一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了。这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目。

二、问题要求:

1:如果当前处于焦点(也就是用户正在输入的那个文本框)不是最后一个输入框,那么按回车键时,将焦点转移到下一个输入框;
2:如果当前处于焦点(也就是用户正在输入的那个文本框)是最后一个输入框,那么按回车键时,将请用户确认后提交表单;
三、基本思路:
1:判断按键是否是回车建, 这个比较好办,用jQeury中的事件,就可以获取到当前按的键的值了,回车键的值是13,比较一下即可。

2:判断当前处于焦点的输入框是不是最后一个输入框。

 

Java代码  收藏代码
  1. 
    
    1. $(function() {  
    2. $("form[name='articleForm'] input:text").keypress(function(e) {  
    3. if (e.which == 13// 判断所按是否回车键  
    4. {  
    5. var inputs = $("form[name='articleForm']").find(":text"); // 获取表单中的所有输入框  
    6. var idx = inputs.index(this); // 获取当前焦点输入框所处的位置  
    7. if (idx == inputs.length - 1// 判断是否是最后一个输入框  
    8. {  
    9. if (confirm("最后一个输入框已经输入,是否提交?")) // 用户确认  
    10. $("form[name='articleForm']").submit(); // 提交表单  
    11. else {  
    12. inputs[idx + 1].focus(); // 设置焦点  
    13. inputs[idx + 1].select(); // 选中文字  
    14. }  
    15. return false;// 取消默认的提交行为  
    16. }  
    17. });  
    18. });  

相关文章推荐

网页Form只有一个input框时,按回车后表单就直接提交了,输入检测函数不起作用

下例中的 testForm 表单中只有一个名称为 testInput 输入框,当 testInput 输入框处于聚焦状态时,按回车表单直接就提交了,而没有通过输入检测函数 checkInput() 进...

json+ajax实现实时刷新和增删查功能

整理上学期做的项目的东西,用jq的ajax和json进行了查询,删除的操作···

jQuery实现的监听回车按键代码

  • 2017年08月11日 09:04
  • 127KB
  • 下载

js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器)

在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。 1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供...

最简单的jQuery实现的Tab插件

  • 2016年10月21日 12:02
  • 33KB
  • 下载

jquery实现tab

  • 2011年05月23日 15:12
  • 6KB
  • 下载

使用jQuery实现简单的tab栏标签切换

强调下没有CSS样式代码 1.页面结构代码 导航菜单 TAB标签 jquery css多级下拉菜单 多...
  • zhake_
  • zhake_
  • 2017年05月02日 14:37
  • 534

Jquery實現的tab切換

  • 2013年12月08日 12:22
  • 101KB
  • 下载

jQuery实现Tab,滑动门,选项卡,图片切换

几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写埃另外还加入了圆角,都是参考...
  • zyu67
  • zyu67
  • 2015年08月08日 16:15
  • 722

jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果

已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼。 路是一步一步...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery实现回车代替Tab键
举报原因:
原因补充:

(最多只允许输入30个字)