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的链式调用之each函数
Dec 03 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
jquery制作多功能轮播图插件
Apr 02 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
axios如何取消重复无用的请求详解
Dec 15 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
一个颜色轮换的简单例子
2006/10/09 PHP
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php数组操作之键名比较与差集、交集赋值的方法
2014/11/10 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python实现基于HTTP文件传输实例
2014/11/08 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
在Python中COM口的调用方法
2019/07/03 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Tensorflow 多线程设置方式
2020/02/06 Python
python实现IOU计算案例
2020/04/12 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
新郎父亲婚宴答谢词
2014/01/11 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
技术员个人工作总结
2015/03/03 职场文书
学术会议开幕词
2016/03/03 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技