asp.net实现取消页面表单内文本输入框Enter响应的方法
本文实例讲述了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 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页面:
<%@ 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"); } }
接着是一个用户控件:
<%@ 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):
<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#程序设计有所帮助。