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隐藏控件的方法
Sep 21 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
jQuery的事件预绑定
Dec 05 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 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中的cookie
2006/11/26 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
fmt:formatDate的输出格式详解
2014/01/09 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
BootStrap table使用方法分析
2016/11/08 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
安装Python的教程-Windows
2017/07/22 Python
Python处理文本换行符实例代码
2018/02/03 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python函数返回不定数量的值方法
2019/01/22 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
python 回溯法模板详解
2020/02/26 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python3注册全局热键的实现
2020/03/22 Python
什么是python的列表推导式
2020/05/26 Python
python与js主要区别点总结
2020/09/13 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
机关作风建设心得体会
2014/10/22 职场文书
同意迁入证明模板
2014/10/26 职场文书
2015年春训学习心得体会范文
2015/03/09 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
Python使用pyecharts控件绘制图表
2022/06/05 Python