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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
bootstrap多层模态框滚动条消失的问题
Jul 21 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
重置Redux的状态数据的方法实现
Nov 18 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
php多文件上传功能实现原理及代码
2013/04/18 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php文件系统处理方法小结
2016/05/23 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
JS运动基础框架实例分析
2015/03/03 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
Nodejs中的JWT和Session的使用
2018/08/21 NodeJs
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python笔记(叁)继续学习
2012/10/24 Python
Python文件操作类操作实例详解
2014/07/11 Python
Django中的forms组件实例详解
2018/11/08 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
简历中自我评价范文3则
2013/12/14 职场文书
税务会计岗位职责
2015/04/02 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL