JQuery实现回车代替Tab键

一、问题情境：

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

二、问题要求：

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

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

三、基本思路：

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

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

四、实现方法：

下面是具体的代码，首先是非常简单的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 910 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 ;//取消默认的提交行为 } } ) ; } ) ;

五、具体解释上述代码：

第1行：说明一下代码在页面完全装入浏览器以后执行。

第3行：对表单中的输入框设置keypress事件，注意参数中函数带有一个参数，将通过它获取当前按键的数值。

第5行：判断是否是回车键，如果不是，则不作任何处理，如果是怎进入下面的代码。

第7行：获取表单中的所有输入框，以便判断当前的输入框是否是最后一个。

第8行：获取当前输入框在扁担的多有输入框中处于第几个。

第10行：判断是否是最后一个输入框。

第12-13行：如果是最后一个，那么显示一个确认框，如果用户确认，则提交表单

第17-18行：如果不是最后一个，那么将下一个输入框设置为焦点，并将其中的文字选中

第21行：取消默认的提交表单操作。

六、问题小结：

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

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