asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法
本文實(shí)例講述了asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法。分享給大家供大家參考,具體如下:
很早以前開(kāi)發(fā)asp.net項(xiàng)目的時(shí)候遇到的:在一個(gè)服務(wù)器TextBox控件上按下 Enter鍵,頁(yè)面回發(fā)刷新一遍。后來(lái)google一下,發(fā)現(xiàn)這是asp.net2.0為表單處理專(zhuān)門(mén)設(shè)置的"Enter key"功能,關(guān)于asp.net ajax表單的enter key,你可以查看這一篇《ASP.NET基于A(yíng)jax的Enter鍵提交問(wèn)題》。前面給出鏈接的兩篇都是叫我們?cè)趺丛O(shè)置enter key默認(rèn)觸發(fā)事件的?,F(xiàn)在有一個(gè)新需求是這樣的,錄入人員在錄入的時(shí)候按下enter鍵不提交表單(想想也是合理的,如果表單中錄入框較多,一不小心按下enter鍵頁(yè)面要回發(fā)多少次?),除非直接點(diǎn)擊服務(wù)器端提交按鈕。簡(jiǎn)單地說(shuō),就是去掉表單元素的enter key功能。下面是我的實(shí)現(xiàn):
一、初步分析和實(shí)現(xiàn):
1、頁(yè)面繼承一個(gè)基類(lèi)BasePage,基類(lèi)繼承自Page類(lèi),在基類(lèi)中注冊(cè)特定服務(wù)器控件的onkeydown腳本事件
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中的服務(wù)器控件添加客戶(hù)端onkeydown腳步事件,防止服務(wù)器控件按下enter鍵直接回發(fā) /// </summary> /// <param name="controls"></param> public static void CancelFormControlEnterKey(ControlCollection controls) { foreach (Control item in controls) { //服務(wù)器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;}} "); } //用戶(hù)控件 else if (item is System.Web.UI.UserControl) { CancelFormControlEnterKey(item.Controls); //遞歸調(diào)用 } } } }
這樣,想取消“enter key”功能的頁(yè)面只有繼承一下BasePage類(lèi)即可。
2、用戶(hù)控件的處理:我的思路就是在基類(lèi)中繼續(xù)處理用戶(hù)控件內(nèi)部的runat=server的控件,測(cè)試也是通過(guò)的。
3、頁(yè)面中和用戶(hù)控件里的沒(méi)有runat=server標(biāo)簽的html控件,直接給這些html控件添加onkeydown事件。
下面是測(cè)試頁(yè)面和其對(duì)應(yīng)的類(lèi)文件:
Test.aspx頁(yè)面:
<%@ 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>
類(lèi):
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"); } }
接著是一個(gè)用戶(hù)控件:
<%@ 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;}}" />
在筆者的機(jī)器上,對(duì)TextBox,HtmlInputText和沒(méi)有runat=server標(biāo)簽的html控件以及三者組合成的用戶(hù)控件按照上面的思路按下enter鍵運(yùn)行效果果然沒(méi)有回發(fā)了。
二、腳本改進(jìn)時(shí)碰到的問(wèn)題
然后我看到if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}這一句不斷地出現(xiàn),就好心把它在頁(yè)面里封裝成JavaScript函數(shù)叫forbidInputKeyDown(ev):
<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的方法對(duì)應(yīng)的事件就是“forbidInputKeyDown(event)”(比如對(duì)于頁(yè)面中服務(wù)器端的TextBox控件在注冊(cè)客戶(hù)端事件的時(shí)候就改寫(xiě)成 webControl.Attributes.Add("onkeydown", "forbidInputKeyDown(event)");),奇怪的是,這一次,頁(yè)面又回發(fā)了?! 然后腳本調(diào)試,forbidInputKeyDown函數(shù)也執(zhí)行了,可是form還是被提交了。
我又看了一下腳本位置,把它從head移動(dòng)到body內(nèi),問(wèn)題依舊。然后懷疑是不是腳本錯(cuò)了?不對(duì),腳本沒(méi)錯(cuò)。難道是人品有問(wèn)題?有問(wèn)題嗎,這個(gè)自信真沒(méi)有。注冊(cè)事件錯(cuò)了嗎?嗯......
我kao,恍然大悟,注冊(cè)事件應(yīng)該這么寫(xiě)的:onkeydown="return forbidInputKeyDown(event)",也就是forbidInputKeyDown函數(shù)前面加上return就好了,還是人品啊,囧。
希望本文所述對(duì)大家asp.net#程序設(shè)計(jì)有所幫助。
相關(guān)文章
asp.net coolite 刪除時(shí)彈出確定按鈕
如果用coolite的 Confirm() 是不知道你選擇了什么的 如上代碼才可以的2009-09-09MVC4制作網(wǎng)站教程第四章 前臺(tái)欄目瀏覽4.5
這篇文章主要為大家詳細(xì)介紹了MVC4制作網(wǎng)站教程,前臺(tái)欄目瀏覽功能實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08asp.net獲取SQL所有數(shù)據(jù)庫(kù)名、所有表名、所有字段名
asp.net獲取SQL所有數(shù)據(jù)庫(kù)名、所有表名、所有字段名...2007-03-03ASP.NET Core啟動(dòng)地址配置方法及優(yōu)先級(jí)順序
這篇文章主要介紹了ASP.NET Core啟動(dòng)地址配置方法及優(yōu)先級(jí)順序,如果在同一臺(tái)機(jī)器上運(yùn)行多個(gè)ASP.NET Core實(shí)例,使用默認(rèn)值肯定不合適,下面我們一起進(jìn)入文章了解具體內(nèi)容吧2022-03-03.NET實(shí)現(xiàn)熱插拔功能(動(dòng)態(tài)替換功用)方案實(shí)例
如果某個(gè)"功能"需要?jiǎng)討B(tài)更新?這種動(dòng)態(tài)更新,可能是需求驅(qū)動(dòng)的,也可能是為了修改 BUG,面對(duì)這種場(chǎng)景,如何實(shí)現(xiàn)“熱插拔”呢?先解釋一下“熱插拔”:在系統(tǒng)運(yùn)行過(guò)程動(dòng)態(tài)替換某些功能,不用重啟系統(tǒng)進(jìn)程。下面看例子2013-11-11收集學(xué)習(xí)asp.net比較完整的面向?qū)ο箝_(kāi)發(fā)流程
如果你已經(jīng)有較多的面向?qū)ο箝_(kāi)發(fā)經(jīng)驗(yàn),跳過(guò)以下這兩步 第一步:掌握一門(mén).NET面向?qū)ο笳Z(yǔ)言第二步:對(duì).NET Framework類(lèi)庫(kù)有一定的了解;在具備了OO基礎(chǔ)之后,以下是具體的學(xué)習(xí)ASP.NET技術(shù)步驟2012-12-12asp.net(c#)復(fù)數(shù)類(lèi)(復(fù)數(shù)加減乘除四則運(yùn)算)
asp.net(c#)復(fù)數(shù)類(lèi)(復(fù)數(shù)加減乘除四則運(yùn)算)...2007-06-06