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 showModalDialog,open取得父窗口的方法
Mar 10 Javascript
JavaScript.Encode手动解码技巧
Jul 14 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 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
咖啡的化学
2021/03/03 咖啡文化
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
python写xml文件的操作实例
2014/10/05 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
python的socket编程入门
2018/01/29 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python自动化工具之pywinauto实例详解
2019/08/26 Python
django model通过字典更新数据实例
2020/04/01 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
班级安全教育实施方案
2014/02/23 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
校运会新闻稿
2015/07/17 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python