« 随笔随心(0)——大多数设计师将成为自由职业者 | 随心随笔(2) —— 虚竹的人生启示 »

你问我答(37)——jQeury实现回车键代替Tab键

昨天和青色同学聊了几句，说到一个具体的技术问题，我觉得可能有一些普遍性，这里详细说一说。

问题要求

问题是这样的实际的情境：对于一个网页上的表单，放置了一个提交按钮以后，用户如果按了键盘的回车键，默认情况下，就会提交这个表单了。这样对于用户输入各个表单项目，会很不方便，输入完一个项目，或者用鼠标选择下一个项目，或者用键盘的Tab键选中下一个项目。

现在希望实现的要求是：

1：如果当前处于焦点（也就是用户正在输入的那个文本框）不是最后一个输入框，那么按回车键时，将焦点转移到下一个输入框；

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

基本思路

这个问题使用jQeury实现是很方便，这里面主要有两个问题需要解决，

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

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

点击这里查看最终效果参考

说明：如果对Javascript和jQeury完全不了解的读者，最好先学习一下相关的基本知识：http://learning.artech.cn/20080621.mastering-javascript-jquery.html 。我们这里就不解释最基本的概念了。

实现方法

下面是具体的代码，首先是非常简单的HTML代码，可以看到，一个form元素，里面有三个输入框，和一个提交按钮，输入框分别设置了id属性。

1
2
3
4
5
6
7
8
9

<form id="myform">
 
<label>first name : </label><input type="text" id="firstName" name="firstName" />
<label>last name : </label><input type="text" id="laseName" name="laseName" />
<label>addess : </label><input type="text" id="address" name="address" />
 
<input type="submit" value="submit" />
 
</form>

接下来是Javascript代码了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

下面具体解释上述代码。

说明：如果对Javascript和jQeury完全不了解的读者，最好先学习一下相关的基本知识：http://learning.artech.cn/20080621.mastering-javascript-jquery.html 。我们这里就不解释最基本的概念了。

第1行：说明一下代码在页面完全装入浏览器以后执行。
第3行：对表单中的输入框设置keypress事件，注意参数中函数带有一个参数，将通过它获取当前按键的数值。
第5行：判断是否是回车键，如果不是，则不作任何处理，如果是怎进入下面的代码。
第7行：获取表单中的所有输入框，以便判断当前的输入框是否是最后一个。
第8行：获取当前输入框在扁担的多有输入框中处于第几个。
第10行：判断是否是最后一个输入框。
第12-13行：如果是最后一个，那么显示一个确认框，如果用户确认，则提交表单
第17-18行：如果不是最后一个，那么将下一个输入框设置为焦点，并将其中的文字选中
第21行：取消默认的提交表单操作。

问题小结

1：可以看出，jQeury对我们写前段程序，确实非常方便，可以说jQeury的出现，改变了我们写Javascript程序的方式，就像C语言的出现，我们不再用汇编那样一个字节一个字节计算内存。

2：从效率角度，第7行代码，可以放到第3行的前面，这样，就不用每次都搜索一次DOM元素，不过实际体验不出速度的变化。

4,939

这篇文章发表于 2009年06月22日 星期一 11:29 am，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

4条留言