`

JQuery实现回车代替Tab键(按回车跳到下一栏)

 
阅读更多

 

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

二、问题要求:

1:如果当前处于焦点(也就是用户正在输入的那个文本框)不是最后一个输入框,那么按回车键时,将焦点转移到下一个输入框;

2:如果当前处于焦点(也就是用户正在输入的那个文本框)是最后一个输入框,那么按回车键时,将请用户确认后提交表单;

三、基本思路:

1:判断按键是否是回车建, 这个比较好办,用jQeury中的事件,就可以获取到当前按的键的值了,回车键的值是13,比较一下即可。

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

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

转自:http://www.oklrc.com/related/javascript/20100912/09124912010.html
分享到:
评论

相关推荐

    javascript回车完美实现tab切换功能

    因此,实现通过回车键来切换到下一个输入框(tab)的功能就显得尤为重要。 要实现这个功能,主要依赖于JavaScript和jQuery库。首先,必须引入jQuery库,因为它简化了HTML文档遍历和事件处理的复杂性。接下来,需要...

    enter键控制input光标移动到下一个框

    在这个例子中,我们有三个连续的输入框,用户通常会期望在填写完一个后,按下"Enter"键就能跳转到下一个。为了实现这个功能,我们可以使用JavaScript,尤其是jQuery库,因为jQuery提供了方便的事件处理和DOM操作。 ...

    表单切换,用回车键替换Tab健(不支持IE)

    通常,用户通过按Tab键在表单元素之间进行切换,但有时我们可能希望用户通过按下回车键来实现这种切换,这样可以提供更友好的交互体验,尤其是对于那些习惯于使用回车键进行确认操作的用户。然而,需要注意的是,这...

    js与jquery回车提交的方法.docx

    - 考虑到无障碍访问的需求,在实现回车键提交功能时,最好确保其他键盘操作也能正常工作,比如使用Tab键导航。 - 提供视觉反馈,例如改变输入框颜色或显示提示信息,可以让用户更加清楚当前的操作状态。 4. **...

    基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )

    第一种方法: 代码如下: $(document).ready(function () { $(‘:input:text:first’).focus(); $(‘:input:enabled’).addClass(‘enterIndex’); // get only input tags with class data-entry textboxes = $(‘....

    基于Jquery的实现回车键Enter切换焦点

    当用户在文本框中按下回车键时,焦点会移动到下一个文本框中。 ### 知识点三:JavaScript事件处理 JQuery允许开发者绑定事件处理器到指定元素。在本例中,使用了`keydown`事件,它在用户按下键盘的任意键时触发。...

    按回车可对下一个单元框进行编辑的列表

    通过允许用户按下回车键直接跳转到下一个输入框,而不是必须用鼠标点击或使用方向键,使得数据录入过程更为流畅。 2. **键盘导航**:在网页或应用程序中,键盘导航是无障碍设计的重要部分。对于有视力障碍或行动...

    jquery 回车事件实现代码

    另外,有时候需要取消默认的回车键行为,比如在文本框中按下回车键时自动跳到下一个输入框,可以通过以下方式来实现: ```javascript // 取消默认的回车键行为 if(window.event.keyCode == 13){ window.event....

    jquery实现tab键进行选择后enter键触发click行为

    这种使用场景为当首页有几个链接需要选择的时候,使用键盘就可以进行触发行为 复制下来放本地用吧 网页上直接测试有问题 效果图: 下面是demo代码 <!DOCTYPE html> <html lang="en">... .active{

    DW中配置Jquery提示

    现在,当你在DW中编写JavaScript代码时,只需键入"$"或"jQuery",然后按回车或Tab键,就会出现jQuery函数和方法的代码提示。这大大提高了编写代码的速度和准确性。 除了基本的代码提示,DW还提供了其他与jQuery相关...

    超实用的jQuery代码段

    3.16 用回车键模拟Tab键 第4章 jQuery操作CSS样式 4.1 使用addClass()函数动态添加样式类 4.2 使用removeClass()函数动态移除样式类 4.3 使用toggleClass()函数切换页面元素的样式类 4.4 为body增加class类...

    为JQuery EasyUI 表单组件增加焦点切换功能的方法

    本文通过一个自定义函数,实现Tab 和 回车键的焦点切换功能。 2、函数定义  通过捕获窗口按件,对回车和Tab键进行了热点切换处理。先根据当前焦点,获取需要tabindex 属性,加1后为下一焦点无素的属性值,根据这一...

    jQuery输入框创建关键词标签代码

    1. 监听输入框的`keyup`事件,当用户按下空格键时触发。 2. 获取输入框的当前值,如果非空并且不包含已存在的标签,则创建一个新的标签元素。 3. 将新标签添加到`tagList`中,并清除输入框内容,以便用户继续输入。 ...

    jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为...

    jquery.ya-enter2tab:另一个进入 Tab 的 jQuery 插件

    jquery.ya-enter2tab.js世界上已经有一堆“进入标签”插件,但仍然很难找到一个完全符合我需求的插件。... Enter 键表示textarea 的新行,textarea 可以加入焦点循环但不支持不回车到 tab)上添加

    jQuery添加删除标签代码

    在这些脚本中,开发者可能会使用jQuery的选择器(如`$("#tagInput")`)找到用户输入标签的元素,监听`keyup`或`blur`事件,当用户按下回车或离开输入框时,检查输入是否有效并添加到显示标签的区域。同时,对于每个...

    jQuery实现的可编辑表格完整实例

    在本实例中,我们将深入探讨如何使用jQuery来创建一个可编辑的表格,这涉及到JavaScript库jQuery的基本用法、DOM操作以及事件处理。首先,我们来看看HTML结构,它包含了一个简单的表格,每个单元格(td)都有一个...

    datagrid键盘操作.zip

    通常,向上键可以用来选择上一行,向下键选择下一行,左键和右键可能用于在多选模式下切换选择状态或在编辑模式下移动光标。此外,其他的键盘快捷键也可能被定义,如回车键用于编辑选定的单元格,Esc键取消编辑,Tab...

Global site tag (gtag.js) - Google Analytics