asp.net实现取消页面表单内文本输入框Enter响应的方法

更新时间：2015年11月30日 11:58:48 作者：Jeff Wong

这篇文章主要介绍了asp.net实现取消页面表单内文本输入框Enter响应的方法,结合实例形式分析了asp.net文本框Enter响应的原理与取消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#程序设计有所帮助。

您可能感兴趣的文章:

.net 4.5部署到docker容器的完整步骤
这篇文章主要给大家介绍了关于.net 4.5部署到docker容器的完整步骤，文中通过示例代码介绍的非常详细，对大家学习或者使用.net4.5具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
ASP.NET 动态写入服务器端控件
使用Asp.net进行开发时，因为某些需求原因，需要在页面中动态添加控件。当然，这些控件可以是普通的html标签，也可以是Asp.net独有的服务器端控件。
2009-04-04
使用NLog给Asp.Net Core做请求监控的方法
这篇文章主要介绍了使用NLog给Asp.Net Core做请求监控的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
VS2010、VS2008等项目的默认浏览器修改方法(图文)
默认情况下，VS会使用操作系统的默认浏览器，但我在调试 ASP.NET 程序时更偏向于使用IE浏览器，下面与大家分享下VS2010、VS2008等项目的默认浏览器的修改方法
2013-05-05
.NET 9 中的多级缓存 HybridCache示例详解
HybridCache是.NET9中引入的一种新的缓存模型,它封装了本地缓存和分布式缓存,简化了缓存操作并提供了标签删除和约束选项,本文给大家介绍.NET 9 中的多级缓存 HybridCache,感兴趣的朋友一起看看吧
2024-12-12
ASP.NET MVC从控制器传递数据到视图的四种方式详解
本篇文章主要介绍了ASP.NET MVC从控制器传递数据到视图的四种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-01-01
ASP.NET如何使用web服务的会话状态
这篇文章主要介绍了ASP.NET如何使用web服务的会话状态，使用一个GridView中的会话对象来展示最近的计算结果，感兴趣的小伙伴们可以参考一下
2015-11-11
在Framework4.0中实现延迟加载的实现方法
延迟加载，亦称延迟实例化，延迟初始化等，主要表达的思想是，把对象的创建将会延迟到使用时创建，而不是在对象实例化时创建对象，即用时才加载。
2011-08-08
精通ASP.NET中弹出技术
本文讨论如何以ASP.NET中的CodeBehind方式实现各种弹出窗口，实现与弹出窗口的交互
2012-10-10
仿vs实现WPF好看的进度条
由于WPF自带的进度条其实不怎么好看，而且没啥视觉效果。下面给大家分享的是仿VS的进度条效果的代码，有需要的小伙伴可以参考下。
2015-06-06

asp.net实现取消页面表单内文本输入框Enter响应的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具