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 相关文章推荐
统一接口:为FireFox添加IE的方法和属性的js代码
Mar 25 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
原生javaScript实现图片延时加载的方法
Dec 22 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 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获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
浅析php单例模式
2014/11/25 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
js中判断变量类型函数typeof的用法总结
2016/08/09 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
详释JavaScript执行环境与执行栈
2019/04/02 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
Python如何用filter函数筛选数据
2020/03/05 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
美国糖果店:Sugarfina
2019/02/21 全球购物
婚礼主持词开场白
2014/03/13 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
超市食品安全承诺书
2015/04/29 职场文书
中秋节祝酒词
2015/08/12 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python