八 02
Digg
Stumbleupon
Technorati
Delicious
编程点滴

Web页面按Enter键点击某个按钮，提交页面

Add





如果在页面上有多个Button，有的时候我们希望通过按Enter回车键来实现点击某个Button的效果。

怎么做呢？

用jQuery可以给页面上的元素加上一个keypress事件，来侦测用户按的是不是Enter键，从而做出处理，比如：


?View Code JAVASCRIPT
1
2
3
4
5
6
7
8

$(document).ready(function() {
    $("body").keypress(function(event) {
                switch (event.keyCode) {
                    case 13:
                        $("#<%=ButtonNext.ClientID %>").click();
                }
            });
});

但是，如果页面上有多行文本框TextArea，按Enter键其实是要换行而不是提交页面。或者有需求就是当在输入框中时，按Enter键就是不想提交页面，怎么办呢？我们可以在刚刚的基础在，再在输入控件上加事件来判断，如果按的是回车键的话，就忽略不做额外处理。


?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(document).ready(function() {
    $("body").keypress(function(event) {
                switch (event.keyCode) {
                    case 13:
                        $("#<%=ButtonNext.ClientID %>").click();
                }
            });
 
     //在所有input元素上绑一个keypress事件
    $(":input").keypress(function(event) {
                switch (event.keyCode) {
                    //通过调用stopPropagation()来阻止事件冒泡
                    case 13: event.stopPropagation();
                }
            });
});

这样，就实现了在input元素上按回车不做处理，而其他时候按回车键实现点击页面上某个按钮的效果。

原创文章，转载请注明： 转载自闲云博客

本文链接地址: Web页面按Enter键点击某个按钮，提交页面

相关文章


Author: jianyun Tags: ,

1 Comment(s)

Referate engleza
2010/11/12

Very nice information,I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work Look forward to reading more from you in the future.

[回复该评论]

订阅评论 TrackBack

留下评论