Asp.Net Form表单控件的回车默认事件

时间 2019-11-06

标签 asp.net asp form 表单控件回车默认事件栏目 ASP 繁體版

原文原文链接

当form表单文本框控件在收到回车事件时,默认会触发表单内第一个可提交按钮的事件,但业务中可能要求有其它控件进行提交,而不是这个默认的javascript

这时须要脚本控件事件冒泡传递取消回事事件.html

 1 $(document).keydown(keyListener);
 2 function keyListener(e)
 3 {
 4     e = e ? e : event;
 5     try
 6     {
 7         if (e.keyCode == 13)
 8         {
 9             if (e.preventDefault)
10             {
11                 e.preventDefault();
12                 e.stopPropagation();
13             }
14             else
15             {
16                 window.event.returnValue = false;
17             }
18         }
19     } 
20     catch (ex)
21     {
22     }
23 }

document.onkeydown = keyListener;
        function keyListener(e)
        {
            e = e ? e : event;
            
            if (e.keyCode == 13)
            {
                if (document.activeElement.id == '<%=this.txtBarCode.ClientID%>')
                {
                    event.preventDefault();
                    e.stopPropagation();
                    $("#<%=this.btnQuery.ClientID%>").click();
                }
               else if (document.activeElement.id == '<%=this.txtGoodID.ClientID%>' || document.activeElement.id == '<%=this.txtSize.ClientID%>')
               {
                    e.preventDefault();
                    e.stopPropagation();
                    var huohao = $('#<%=this.txtGoodID.ClientID%>').val();
                    var chima = $('#<%=this.txtSize.ClientID%>').val();
                    if (huohao != null && huohao != '' && 
                        chima != null && chima != '')
                    {
                        <%=this.ClientScript.GetPostBackEventReference(this.btnQuery, "")%>;
                    }
                }
            }
        }

ASP.NET多个提交按钮页面，回车Enter执行指定按钮的事件(转)

在WEB页面上，一般SUBMIT类型的按钮会被默认指派为所在FORM表单的提交按钮java

在作ASP.net WEB应用的时候，经常遇到会在同一个页面里添加多个按钮，而每一个按钮确定都会触发页面回送事件。浏览器

在ASP.NET中，只能指定一个带有runat="server"的FORM表单，所以，这个表单会指派哪一个按钮为默认提交按钮呢？服务器

不作任何处理的状况下是很难控制的，例如在同一个页面里作了N个搜索框，设计上理想的思路是在某一输入框输入关键字后，用户按ENTER键，执行当前输入的输入框对应的提交按钮，可是，实际上每每事与愿违。不管怎么提交，老是会只执行某一个按钮事件。post

若是指定Form的默认按钮，能够指定Form的DefaultButton属性值为一个按钮的ID。但这样下来，回车时就永远执行这个按钮，其它按钮没法被回车触发。ui

网上不少方法都是使用JAVASCRIPT来进行判断，在输入框中加入KEYPRESS之类的事件，而后检查eventCode，若是是回车键，那么就指定执行某一个按钮。this

这个方法不是不行，可是，并很差维护，并且在处理复杂的逻辑时，每每很差控制。url

其实，ASP.NET给出了很好的解决方案，只是一般不被人注意。spa

首先，屏蔽浏览器提交模式，也就是说，FORM再也不默认指定一个ENTER提交的按钮

方法是将控件button的UseSubmitBehavior设置为false（LinkButton和ImageButton没有这个属性，没必要设置），这样这个按钮就不会接受回车提交，这样就不会出现用户焦点在页面某处聚焦时按回车提交的状况。

为何会这样呢？查看页面源文件咱们会发现原本ASP.NET的BUTTON服务器控件在发送到客户端后type="submit"，但这时UseSubmitBehavior设置为false后，type="button" ，并且多了一个onclick事件，内容是"javascript:__doPostBack('Button1','')" id="Button1"，这样，就说明，这个按钮再也不是FORM的提交按钮了，而只是一个普通按钮，要提交页面必须执行click事件，因此怎么点回车，也不会执行这个按钮的提交事件。

刚才只是第一步，阻止了默认的提交。可是，咱们要的效果是回车能够提交啊。只是设置这一个属性固然没法达到咱们想要的效果。

接下来，咱们要了解Panel控件。

其实Panel控件是很是有用的，他是一个容器，在ASP.NET的Panel控件中有一个属性 DefaultButton， 这个属性在ASP.NET的Form控件中也有（前有叙述）。

Panel是一个特殊的控件 MSDN上的说明是：使用Panel 控件来组织 Form、另外一 Panel 或模板中的内容和控件。

也就是说Panel是ASP.NET对Form的一个补充，能够给表单分区域的控件，这也是为何ASP.NET AJAX容器使用该控件的缘由。

咱们都知道，ASPX只能有一个runat=“server”的FORM表单，那么要进行细致，具体的FORM操做怎么办，那么就得靠Panel控件

这里，咱们就会用到Panel的这个功能

将一组输入框和按钮放在一个Panel中，指定该Panel的DefaultButton属性为按钮ID，这样，当用户焦点处于这个Panel内的某一控件时，点击回车就会执行这个Panel的DefaultButton所指定的按钮。

Panel是Form的补充控制，能够经过使用Panel对表单进行更多的操做，这样，ASP.NET只能拥有一个Form所引发的一些困难均可以迎刃而解。

原文 http://blog.sina.com.cn/s/blog_568e662301018n2i.html

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 5     <title>submit例子 - aspxhome.com</title>
 6 </head>
 7 <body>
 8     <h1>本demo演示在文本框中按enter键是否触发提交表单</h1>
 9     <h2>默认状况下，一个文本框的时候，提交，无论按钮type是submit仍是button</h2>
10     <form action="http://www.csdn.net">
11         <input type="text">
12         <input type="button" value="提交">
13     </form>
14     <h2>一个文本框的时候怎么才能作到不提交，方法是加一个隐藏掉的文本框</h2>
15     <form action="http://www.csdn.net">
16         <input type="text">
17         <input type="text" style="display:none">
18         <input type="button" value="提交">
19     </form>
20     <h2>只要有type为submit的按钮存在，一个文本框仍是多个文本框都提交</h2>
21     <form action="http://www.csdn.net">
22         <input type="text">
23         <input type="submit" value="提交">
24     </form>
25     <h2>只要有type为submit的按钮存在，一个文本框仍是多个文本框都提交</h2>
26     <form action="http://www.csdn.net">
27         <input type="text">
28         <input type="text">
29         <input type="submit" value="提交">
30     </form>
31     <h2>多个文本框的时候，不提交，用type为button的按钮就行啦</h2>
32     <form action="http://www.csdn.net">
33         <input type="text">
34         <input type="text">
35         <input type="button" value="提交">
36     </form>
37     <h2>用button元素时，FX和IE下有不一样的表现</h2>
38     <form action="http://www.csdn.net">
39         <input type="text">
40         <input type="text">
41         <button>提交</button>
42     </form>
43     <h2>radio和checkbox在FX下也会触发提交表单，在IE下不会</h2>
44     <form action="http://www.csdn.net">
45         <input type="text">
46         <input type="radio" name="a">
47         <input type="checkbox" name="b">
48         <input type="checkbox" name="c">
49         <input type="button" value="提交">
50     </form>
51     <h2>type为image的按钮，等同于type为submit的效果</h2>
52     <form action="http://www.csdn.net">
53         <input type="text">
54         <input type="text">
55         <input type="image" src="/images/logo.gif">
56     </form>
57 </body>
58 </html>