asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法

更新時(shí)間：2015年11月30日 11:58:48 作者：Jeff Wong

這篇文章主要介紹了asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法,結(jié)合實(shí)例形式分析了asp.net文本框Enter響應(yīng)的原理與取消Enter響應(yīng)的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了asp.net實(shí)現(xiàn)取消頁(yè)面表單內(nèi)文本輸入框Enter響應(yīng)的方法。分享給大家供大家參考，具體如下：

很早以前開發(fā)asp.net項(xiàng)目的時(shí)候遇到的:在一個(gè)服務(wù)器TextBox控件上按下 Enter鍵，頁(yè)面回發(fā)刷新一遍。后來(lái)google一下，發(fā)現(xiàn)這是asp.net2.0為表單處理專門設(shè)置的"Enter key"功能，關(guān)于asp.net ajax表單的enter key，你可以查看這一篇《ASP.NET基于Ajax的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è)基類BasePage,基類繼承自Page類，在基類中注冊(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ù)器控件添加客戶端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;}} ");
   }
   //用戶控件
   else if (item is System.Web.UI.UserControl)
   {
    CancelFormControlEnterKey(item.Controls); //遞歸調(diào)用
   }
  }
 }
}

這樣，想取消“enter key”功能的頁(yè)面只有繼承一下BasePage類即可。

2、用戶控件的處理：我的思路就是在基類中繼續(xù)處理用戶控件內(nèi)部的runat=server的控件，測(cè)試也是通過(guò)的。

3、頁(yè)面中和用戶控件里的沒(méi)有runat=server標(biāo)簽的html控件，直接給這些html控件添加onkeydown事件。

下面是測(cè)試頁(yè)面和其對(duì)應(yīng)的類文件：

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>

類：

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è)用戶控件：

<%@ 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控件以及三者組合成的用戶控件按照上面的思路按下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è)客戶端事件的時(shí)候就改寫成 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)該這么寫的：onkeydown="return forbidInputKeyDown(event)"，也就是forbidInputKeyDown函數(shù)前面加上return就好了，還是人品啊，囧。

希望本文所述對(duì)大家asp.net#程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: