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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。