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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
JavaScript构造函数详解
Dec 27 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
何时/使用 Vue3 render 函数的教程详解
Jul 25 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输入流php://input实例讲解
2015/12/22 PHP
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
python绘制动态曲线教程
2020/02/24 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python中os.remove()用法及注意事项
2021/01/31 Python
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
体育专业个人求职信范文
2013/12/27 职场文书
最新大学职业规划书范文
2013/12/30 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
朋友聚会开场白
2015/06/01 职场文书
婚礼父母致辞
2015/07/28 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
MySQL数据库 安全管理
2022/05/06 MySQL
关于Redis的主从复制及哨兵问题
2022/06/16 Redis