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中的函数
Jan 22 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 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实现查询百度google收录情况(示例代码)
2013/08/02 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
JS 建立对象的方法
2007/04/21 Javascript
JavaScript面象对象设计
2008/04/28 Javascript
Prototype Class对象学习
2009/07/19 Javascript
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
Angular2实现组件交互的方法分析
2017/12/19 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Python用input输入列表的实例代码
2020/02/07 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
2013年学期结束动员演讲稿
2014/01/07 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
奖学金个人总结
2015/03/04 职场文书
Python基础详解之描述符
2021/04/28 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL