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 相关文章推荐
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
浅谈JavaScript Array对象
Dec 29 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
js闭包实现按秒计数
Apr 23 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JS变量及其作用域
Mar 29 Javascript
vue params、query传参使用详解
Sep 12 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
GOJS+VUE实现流程图效果
Dec 01 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 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
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP实现的简单日历类
2014/11/29 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
php中strtotime函数性能分析
2016/11/20 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Vue使用枚举类型实现HTML下拉框步骤详解
2018/02/05 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python算术运算符实例详解
2017/05/31 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
使用PyQt4 设置TextEdit背景的方法
2019/06/14 Python
python 实现视频 图像帧提取
2019/12/10 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
美发活动策划书
2014/01/14 职场文书
颁奖典礼主持词
2014/03/25 职场文书
培训协议书范本
2014/04/22 职场文书
中秋联欢会主持词
2015/07/04 职场文书
研讨会致辞
2015/07/31 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers