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#程序设计有所帮助。
相关推荐
-
asp.net textbox javascript实现enter与ctrl+enter互换 文本框发送消息与换行(类似于QQ)
1.也许讲解有点初级,希望高手不要"喷"我,因为我知道并不是每一个人都是高手,我也怕高手们说我装13: 2.如有什么不对的地方,还希望大家指出,一定虚心学习,如果有更好的办法请告诉我一声哦: 3.本文属于作者原创,尊重他人劳动成果,转载请注明作者,谢谢. 下面开讲: 如题,这个功能也困扰了我一两天事件了,我也上网找了很多资料,但是网上大部分的说法都差不多,问题始终还是没解决,于是乎我开始找是问题的根源,我开始用的是文本框的onkeydown事件,分别写了两个js函数,如下: 复制代码
-
ASP.Net 请求响应流程简述
一.浏览器请求页面的简单流程 当浏览器请求静态页面时,会发送请求给服务器软件,服务器软件直接去找对应的静态页面,并返回给浏览器. 当浏览器请求动态页面时,服务器软件收到请求,发现处理不了.aspx文件,就去映射表当中根据后缀名找对应的处理程序(aspnet_isapi.dll),这个处理程序实现了服务器软件提供的接口,即服务器软件通过接口调用了这个处理程序当中的方法.aspnet_isapi.dll会将请求转交给.Net Framework,由它处理动态页面,创建页面对象,生成相应报文,响应给浏
-
asp.net(c#)Enterprise Library 3.0 下载
微软今天发布了Enterprise Library 3.0,又有新的东西可以研究了,在Enterprise Library 3.0中包含如下8个应用程序块: l Caching Application Block l Cryptography Application Block l Data Access Application Block l Exception Handling Application Block l
-
ASP.NET2.0使用Enter Key作为默认提交问题分析(附源码)
本文实例分析了ASP.NET2.0使用Enter Key作为默认提交的方法.分享给大家供大家参考,具体如下: 网页开发中最烦人的事情之一就是为表单处理"Enter key" ,"Enter key"已经成为用户提交表单的偏好.虽然我们为用户提供了提交按钮,但是最简单也是最直接的方式仍然是:输入文字,然后回车完成提交 ASP.NET 2.0中为此提供了很好的解决方法.只需要将"defaultbutton"属性指定到想要引发事件的按钮控件的ID上就可
-
ASP.NET基于Ajax的Enter键提交问题分析
本文实例讲述了ASP.NET基于Ajax的Enter键提交.分享给大家供大家参考,具体如下: 近日遇到一个Enter键的问题,总结下: 1. 首先复习下html form对Enter的响应,不同的浏览器对Enter的处理略有不同,这里采用IE7 A. html form只有一个TextBox, 没有submit按钮, 点Enter 提交form. B. >1个TextBox, 没有submit按钮, 点Enter ,form没有响应. C. 页面有一个(或多个)submit按钮, 点Enter,
-
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键提交问题>.前面给出链接的两篇都是叫我们怎
-
正则表达式进行页面表单验证功能
一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子. 效果图:(当用户填写的信息不符合规范时显示错误提示) 我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏. html结构: <div id="wrap"> <h1>注册</h1> <div> <input t
-
JavaScript 完成注册页面表单校验的实例
1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 第四步:数据合法(让表单提交) 第五步:数据非法(给出错误提示信息,不让表单提交) 问题:如何控制表单提交? 关于事件 onsubmit:一般用于表单提交的位置,那么需要在定义函数的时候给出一个 返回值. onsubmit = return checkForm() 2.完成注册页面表单校验 <!DOC
-
django之从html页面表单获取输入的数据实例
本文主要讲解如何获取用户在html页面中输入的信息. 1.首先写一个自定义的html网页 login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <form method="post"
-
layer父页获取弹出层输入框里面的值方法
主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的逻辑,只想把填写的值带回去用隐藏控件存一下,到时候按照原来的逻辑整体存,所以没办法参考她的,最后搜索很多,解决了问题,具体代码如下: 父页面: <div class="row"> <div class="col-md-6"> <div cl
-
jQuery Form 页面表单提交的小例子
复制代码 代码如下: <script type="text/javascript" src="${ctx}/js/jquery.form.js"></script> <script type="text/javascript"> //创建测试实例 function createInstance() { var options = { succes
-
js正则表达式注册页面表单验证
正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
-
SpringMVC接收页面表单参数
1.直接把表单的参数写在Controller相应的方法的形参中 @RequestMapping("/addUser1") public String addUser1(String userName,String password) { System.out.println("userName is:"+userName); System.out.println("password is:"+password); return "/us
-
JSP刷新页面表单重复提交问题解决办法分享
使用sessionID和时间戳作为标识,关键代码如下: 复制代码 代码如下: public class SswpdjAction extends BaseAction{ public String execute(){ /**业务代码**/ ................ //设置标识 this.setSessionToken(); //转到添加页面 return "toAdd"; } public String
-
几种设置表单元素中文本输入框不可编辑的方法总结
代码: 复制代码 代码如下: <input type="text" value="fisker" onclick="alert(this.value);" onfocus="this.blur()" /> 输入框无法获得焦点,不能编辑 表单可以获得值. 可以复制. 蛮奇怪的,都选住了,还没有获得焦点? 2,readonly 代码: <input type="text" value=&quo