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

前端技术 2023/09/01 .NET

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

本文地址：https://www.stayed.cn/item/2811

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案