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脚本事件

ContractedBlock.gif Code

这样,想取消“enter key”功能的页面只有继承一下BasePage类即可。
2、用户控件的处理:我的思路就是在基类中继续处理用户控件内部的runat=server的控件,测试也是通过的。
3、页面中和用户控件里的没有runat=server标签的html控件,直接给这些html控件添加onkeydown事件。
下面是测试页面和其对应的类文件:
Test.aspx页面:

ContractedBlock.gif Code

类:

ContractedBlock.gif Code

接着是一个用户控件:

ContractedBlock.gif Code

在笔者的机器上,对TextBox,HtmlInputText和没有runat=server标签的html控件以及三者组合成的用户控件按照上面的思路按下enter键运行效果果然没有回发了。

二、脚本改进时碰到的问题
然后我看到if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {return false;}}这一句不断地出现,就好心把它在页面里封装成JavaScript函数叫forbidInputKeyDown(ev):

ContractedBlock.gif Code

然后onkeydown的方法对应的事件就是“forbidInputKeyDown(event)”(比如对于页面中服务器端的TextBox控件在注册客户端事件的时候就改写成 webControl.Attributes.Add("onkeydown", "forbidInputKeyDown(event)");),奇怪的是,这一次,页面又回发了?! 然后脚本调试,forbidInputKeyDown函数也执行了,可是form还是被提交了。
我又看了一下脚本位置,把它从head移动到body内,问题依旧。然后怀疑是不是脚本错了?不对,脚本没错。难道是人品有问题?有问题吗,这个自信真没有。注册事件错了吗?嗯......
我kao,恍然大悟,注册事件应该这么写的:onkeydown="return forbidInputKeyDown(event)",也就是forbidInputKeyDown函数前面加上return就好了,还是人品啊,囧。









本文转自JeffWong博客园博客,原文链接:本文转自JeffWong博客园博客,原文链接:XXXXXXXX,如需转载请自行联系原作者,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
44 5
|
5月前
|
开发框架 .NET 中间件
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (2)第七天Blazor班级管理页面编写和接口对接
109 7
|
2月前
|
开发框架 前端开发 .NET
七天.NET 8操作SQLite入门到实战 - (3)第七天Blazor学生管理页面编写和接口对接
七天.NET 8操作SQLite入门到实战 - (3)第七天Blazor学生管理页面编写和接口对接
|
5月前
|
JSON 开发框架 .NET
ASP.NET Core Web API设置响应输出的Json数据格式的两种方式
ASP.NET Core Web API设置响应输出的Json数据格式的两种方式
153 0
|
12月前
|
开发框架 JSON .NET
ASP.NET Core 响应location
响应中 location 的设置示例:发送POST 请求,进行创建资源的操作。注意的请求头中content-type 的设置,需要设置成 application/json 类型,并不一定需要json 类型的数据,但默认情况下使用的都是json传输数据,否则asp.net core 会返回 415 状态码。同时请求体中 也要符合api 接口需要的格式,如果不符合,则会得到 400 的响应码。...
57 0
ASP.NET Core 响应location
|
开发框架 数据可视化 前端开发
ASP.NET Core MVC+Quartz实现定时任务可视化管理页面
ASP.NET Core MVC+Quartz实现定时任务可视化管理页面
534 0
|
开发框架 缓存 JavaScript
[ASP.NET教程] 防止表单重复提交
[ASP.NET教程] 防止表单重复提交
|
开发框架 JavaScript .NET
Asp.net C#页面传参的几种方式
Asp.net C#页面传参的几种方式
136 0
mvc.net分页查询案例——前台页面(Index.aspx)
mvc.net分页查询案例——前台页面(Index.aspx)