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 相关文章推荐
浅谈angularjs $http提交数据探索
Jan 20 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
Nov 25 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
js实现ATM机存取款功能
Oct 27 Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 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中time(),date(),mktime()区别介绍
2013/09/28 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
Jquery实战_读书笔记1—选择jQuery
2010/01/22 Javascript
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
autoIMG 基于jquery的图片自适应插件代码
2011/03/12 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
Javascript中内建函数reduce的应用详解
2016/10/20 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Django密码存储策略分析
2020/01/09 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
个人自我评价范文
2014/02/05 职场文书
海洋科学专业求职信
2014/08/10 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
演讲开场白台词大全
2015/05/29 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2015中学教学工作总结
2015/07/22 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python
Fluentd搭建日志收集服务
2022/09/23 Servers