本文實例講述了asp.net實現取消頁面表單內文本輸入框Enter響應的方法。分享給大家供大家參考,具體如下:
很早以前開發asp.net項目的時候遇到的:在一個服務器TextBox控件上按下 Enter鍵,頁面回發刷新一遍。后來google一下,發現這是asp.net2.0為表單處理專門設置的"Enter key"功能,關于asp.net ajax表單的enter key,你可以查看這一篇《ASP.NET基于Ajax的Enter鍵提交問題》。前面給出鏈接的兩篇都是叫我們怎么設置enter key默認觸發事件的。現在有一個新需求是這樣的,錄入人員在錄入的時候按下enter鍵不提交表單(想想也是合理的,如果表單中錄入框較多,一不小心按下enter鍵頁面要回發多少次?),除非直接點擊服務器端提交按鈕。簡單地說,就是去掉表單元素的enter key功能。下面是我的實現:
一、初步分析和實現:
1、頁面繼承一個基類BasePage,基類繼承自Page類,在基類中注冊特定服務器控件的onkeydown腳本事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public class BasePage : System.Web.UI.Page { public BasePage() { } protected override void OnInit(EventArgs e) { base .OnInit(e); CancelFormControlEnterKey( this .Page.Form.Controls); } /// <summary> /// 在這里我們給Form中的服務器控件添加客戶端onkeydown腳步事件,防止服務器控件按下enter鍵直接回發 /// </summary> /// <param name="controls"></param> public static void CancelFormControlEnterKey(ControlCollection controls) { foreach (Control item in controls) { //服務器TextBox if (item.GetType() == typeof (System.Web.UI.WebControls.TextBox)) { WebControl webControl = item as WebControl; webControl.Attributes.Add( "onkeydown" , "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}} " ); } //html控件 else if (item.GetType() == typeof (System.Web.UI.HtmlControls.HtmlInputText)) { HtmlInputControl htmlControl = item as HtmlInputControl; htmlControl.Attributes.Add( "onkeydown" , "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}} " ); } //用戶控件 else if (item is System.Web.UI.UserControl) { CancelFormControlEnterKey(item.Controls); //遞歸調用 } } } } |
這樣,想取消“enter key”功能的頁面只有繼承一下BasePage類即可。
2、用戶控件的處理:我的思路就是在基類中繼續處理用戶控件內部的runat=server的控件,測試也是通過的。
3、頁面中和用戶控件里的沒有runat=server標簽的html控件,直接給這些html控件添加onkeydown事件。
下面是測試頁面和其對應的類文件:
Test.aspx頁面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<%@ Page Language= "C#" AutoEventWireup= "true" CodeBehind= "Test.aspx.cs" Inherits= "Test" %> <%@ Register src= "TestUserControl.ascx" tagname= "TestUserControl" tagprefix= "uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head runat= "server" > <title></title> </head> <body> <form id= "form1" runat= "server" > <input type=text id= "txtTest" runat= "server" /> <input id= "txtTest1" type= "text" name= "txtTest1" onkeydown= "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}" /> <asp:textbox ID= "Textbox1" runat= "server" ></asp:textbox> <uc1:TestUserControl ID= "TestUserControl1" runat= "server" /> <asp:Button ID= "btnSubmit" runat= "server" Text= "Submit" /> </form> </body> </html> |
類:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Test : BasePage { protected void Page_Load( object sender, EventArgs e) { Response.Write( "123" ); } } |
接著是一個用戶控件:
1
2
3
4
5
6
|
<%@ Control Language= "C#" AutoEventWireup= "true" CodeBehind= "TestUserControl.ascx.cs" Inherits= "MyWeb.TestUserControl" %> <asp:TextBox ID= "TextBox1" runat= "server" ></asp:TextBox> <br /> <input id= "Text1" type= "text" runat= "server" /> <br /> <input id= "txtInput" type= "text" name= "txtInput" onkeydown= "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}" /> |
在筆者的機器上,對TextBox,HtmlInputText和沒有runat=server標簽的html控件以及三者組合成的用戶控件按照上面的思路按下enter鍵運行效果果然沒有回發了。
二、腳本改進時碰到的問題
然后我看到if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}這一句不斷地出現,就好心把它在頁面里封裝成JavaScript函數叫forbidInputKeyDown(ev):
1
2
3
4
5
6
7
8
9
|
<script type= "text/javascript" > function forbidInputKeyDown(ev) { if ( typeof (ev) != "undefined" ) { if (ev.keyCode || ev.which) { if (ev.keyCode == 13 || ev.which == 13) { return false ; } } } } </script> |
然后onkeydown的方法對應的事件就是“forbidInputKeyDown(event)”(比如對于頁面中服務器端的TextBox控件在注冊客戶端事件的時候就改寫成 webControl.Attributes.Add("onkeydown", "forbidInputKeyDown(event)");),奇怪的是,這一次,頁面又回發了?! 然后腳本調試,forbidInputKeyDown函數也執行了,可是form還是被提交了。
我又看了一下腳本位置,把它從head移動到body內,問題依舊。然后懷疑是不是腳本錯了?不對,腳本沒錯。難道是人品有問題?有問題嗎,這個自信真沒有。注冊事件錯了嗎?嗯......
我kao,恍然大悟,注冊事件應該這么寫的:onkeydown="return forbidInputKeyDown(event)",也就是forbidInputKeyDown函數前面加上return就好了,還是人品啊,囧。
希望本文所述對大家asp.net#程序設計有所幫助。