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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
Apr 07 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
js实现简单掷骰子效果
Oct 24 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的switch判断语句的“高级”用法详解
2014/10/01 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
jQuery与getJson结合的用法实例
2015/08/07 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
浅谈js原生拖放
2016/11/21 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
Python的Django框架中的数据过滤功能
2015/07/17 Python
Python3 replace()函数使用方法
2018/03/19 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python 利用turtle模块画出没有角的方格
2019/11/23 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
python调用win32接口进行截图的示例
2020/11/11 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
工作说明书格式
2014/07/29 职场文书
校园运动会广播稿
2014/10/06 职场文书
离职报告范文
2014/11/04 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python