本文实例讲述了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#程序设计有所帮助。