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代码
Oct 09 Javascript
超级退弹代码
Jul 07 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
在图片上显示左右箭头类似翻页的代码
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
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
微信小程序实现默认第一个选中变色效果
2018/07/17 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
vue实现简单图片上传
2020/06/30 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python实现屏保计时器的示例代码
2018/08/08 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
管理学专业个人求职信范文
2013/09/21 职场文书
新闻学专业应届生求职信
2013/11/08 职场文书
我为自己代言广告词
2014/03/18 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
欠款起诉书范文
2015/05/19 职场文书
入党团支部推荐意见
2015/06/02 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
你需要掌握的20个Python常用技巧
2022/02/28 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript