`
uule
  • 浏览: 6381904 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

JQuery实现回车代替Tab键

阅读更多

总结:

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

 

原文链接:http://www.popo4j.com/article/JQuery-to-achieve-Enter-key-instead-of-Tab.html

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

二、问题要求:

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

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

 

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

 

1

分享到:
评论
1 楼 hngmduyi 2012-11-16  
学习了。

相关推荐

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

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

    基于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代码段

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

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

    在本实例中,我们将深入...这个实例对于理解jQuery在网页交互中的应用非常有帮助,同时也提供了实现可编辑表格的一种实用方法。通过类似的方法,开发者可以扩展这个功能,比如添加验证、错误提示、保存数据到服务器等。

    常用限制input的方法

    此处`event.keyCode == 13`检测回车键,将其替换为`Tab`键(`keyCode = 9`),从而实现回车键的重定向。 ### 5. 限制输入框只能输入数字 可以利用正则表达式来限制输入框内的内容只能包含数字。例如: ```html (/[^...

    ASP.Net.技巧收集.pdf

    - **定义**: 当用户按下回车键时自动触发Tab键的效果。 - **实现方法**: JavaScript监听键盘事件并替换按键行为。 #### 11. DataGrid 超级连接列 - **定义**: 在DataGrid控件中使用超级链接作为一列的数据显示方式...

    asp.net开发常用整理集合

    ### ASP.NET 开发常用知识点汇总 #### 一、ASP.NET 页面内传参数方法 1. **使用QueryString** - **优点**: - 使用简单,适用于安全性要求不高的场景,如传递数字或文本值。 - **缺点**: ...

    bootstrap table单元格新增行并编辑

    当用户离开单元格(失去焦点)或按下回车键时,新的内容会替换原有单元格的文本,并恢复单元格的点击事件。 `addtr` 函数则用于在表格底部添加新的行,允许用户继续添加新的键值对。注意,这里的行数限制(8 行)...

    基于javascript如何传递特殊字符

    特殊字符包括但不限于以下几种:单引号('),双引号("),和号(&),反斜杠(\),换行符(\n),回车符(\r),制表符(\t),退格符(\b),以及换页符(\f)。这些特殊字符如果直接添加到字符串中,可能会导致...

Global site tag (gtag.js) - Google Analytics