Textbox控件注册回车事件及触发按钮提交事件具体实现


Posted in Javascript onMarch 04, 2013

引子
在ASP.Net页面中textbox的index为1(或n),其后的提交按钮index为2(n+1),光标在textbox中,回车后自动焦点移动到后面的button上,会触发button的点击事件。

但在Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况(应该是自动切换焦点)。

由于并且该服务端TextBox控件没有提供OnKeyPress或OnKeyDown等事件,也无法针对回车事件写后台代码来调用Button按钮的点击事件。

于是上网查找相关的介绍,最终解决了以下两个问题
(一)、实现在TextBox控件回车事件中 执行JS代码,来控制页面元素的值。
(二)、实现在TextBox控件回车事件中 调用服务端控件的点击事件,来执行服务端C#代码,实现相关的功能。
具体实现如下
一、注册和触发服务端TextBox控件回车事件
1.PageLoad事件代码:

protected void Page_Load(object sender, EventArgs e) 
{ 
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()"); 
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()"); 
}

2.javascript代码:
<script language="javascript"> 
function EnterTextBox() { 
if (event.keyCode == 13 && document.all["MessageTxt"].value != "") //按下了回车,并且文本框里有值 
{ 
$("#<%=hidKeywords.ClientID%>").val($("#<%=MessageTxt.ClientID%>").val().replace(/[^\u0000-\u00FF]/g, 
function ($0) { 
return escape($0).replace(/(%u)(\w{4})/gi, "&#x$2;") 
})); 
} 
} 
</script>

二、TextBox控件回车事件中调用服务端Button控件点击事件
1.PageLoad事件代码: 同上。
protected void Page_Load(object sender, EventArgs e) 
{ 
MessageTxt.Attributes.Add("onkeypress", "EnterTextBox()"); 
MessageTxt.Attributes.Add("onkeydown", "EnterTextBox()"); 
}

2.javascript代码: 注意使用原始的dom对象获取按钮,使用Jquery获取不到。
<script language="javascript"> 
function EnterTextBox() { 
var button = document.getElementById('<%=btnSearch.ClientID%>');//获取服务端控件对应的页面对象 
if (event.keyCode == 13) //按下了回车 
{ 
  button.click(); 
event.returnValue = false; 
} 
} </script>
Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
详解webpack4.x之搭建前端开发环境
Mar 28 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
在图片上显示左右箭头类似翻页的代码
Mar 04 #Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 #Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 #Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 #Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 #Javascript
JS获取后台Cookies值的小例子
Mar 04 #Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 #Javascript
You might like
SONY ICF-SW55的电路分析
2021/03/02 无线电
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery简单设置文本框回车事件的方法
2016/08/01 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python解决鸡兔同笼问题的方法
2014/12/20 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
纯CSS3实现图片无间断轮播效果
2016/08/25 HTML / CSS
荷兰游戏商店:Allyouplay
2019/03/16 全球购物
电脑饰品店的创业计划书
2014/01/21 职场文书
环境卫生标语
2014/06/09 职场文书
爱护草坪标语
2014/06/24 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS
使用golang编写一个并发工作队列
2021/05/08 Golang
nginx 配置指令之location使用详解
2022/05/25 Servers