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 相关文章推荐
jValidate 基于jQuery的表单验证插件
Dec 12 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
Bootstrap路径导航与分页学习使用
Feb 08 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 Javascript
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
基于iview的router常用控制方式
May 30 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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以及MYSQL日期比较方法
2012/11/29 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
用npm-run实现自动化任务的方法示例
2019/01/14 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
2019/02/27 jQuery
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
[51:34]Ti4主赛事胜者组 DK vs EG 2
2014/07/19 DOTA
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python实现简单状态框架的方法
2015/03/19 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python实现黑客字幕雨效果
2018/06/21 Python
numpy 声明空数组详解
2019/12/05 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
用python批量移动文件
2021/01/14 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
科研先进个人典型材料
2014/01/31 职场文书
贷款委托书怎么写
2014/08/02 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
学校隐患排查制度
2015/08/05 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python