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

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

怎么做呢?

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


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

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


$(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键点击某个按钮,提交页面

1 response to "Web页面按Enter键点击某个按钮,提交页面"

  1. By: Referate engleza Posted: 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.

    [回复该评论]

发表评论

电子邮件地址不会被公开。 必填项已用*标注