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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 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防注
2007/01/15 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
lib.utf.js
2007/08/21 Javascript
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
jQuery事件 delegate()使用方法介绍
2012/10/30 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
javascript属性访问表达式用法分析
2015/04/25 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
2020/04/09 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
Python中使用Inotify监控文件实例
2015/02/14 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
传播学专业毕业生自荐信
2013/11/04 职场文书
技能比赛获奖感言
2014/02/14 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
法人授权委托书
2014/04/03 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
教师求职自荐书
2014/06/14 职场文书
新课培训心得体会
2014/09/03 职场文书
小学家庭教育心得体会
2016/01/14 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
AngularJS实现多级下拉框
2022/03/25 Javascript