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脚本事件

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></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页面:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Test" %> <%@ Register src="https://www.jb51.net/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 runat="server" > <input type=text runat="server" /> <input type="text" onkeydown="if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}" /> <asp:textbox runat="server"></asp:textbox> <uc1:TestUserControl runat="server" /> <asp:Button 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"); } }

接着是一个用户控件:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs" Inherits="MyWeb.TestUserControl" %> <asp:TextBox runat="server"></asp:TextBox> <br /> <input type="text" runat="server"/> <br /> <input type="text" 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):

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjwfyz.html