Textbox控件注册回车事件及触发按钮提交事件具体实现
更新时间：2013年03月04日 15:09:30 作者：
Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况,于是上网查找相关的介绍最终解决了这两个问题，感兴趣的你可以参考下或许对你有所帮助
引子：
在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>
在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+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下2016-02-02
小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题
本文主要介绍了小程序使用webview内嵌h5页面 wx.miniProgram.getEnv失效问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了JS实现轮播图效果的3种简单方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
Module模式是常见的JavaScript编程模式，一般来说这种模式是很好理解的，但是依然有一些高级的用法没有得到太多的注意。在这篇文章中我会提到Module模式的基础知识和一些真正重要的话题，包括一个可能是我原创的2013-08-08
这篇文章主要为大家详细介绍了Openlayers实现地图的基本操作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
用js实现的客户端即可实现md5值的代码，一般情况下都是后台语言才有的，客户端也有了，方便有需要的朋友了。2011-02-02
这篇文章主要介绍了Bootstrap Table中的多选框删除功能，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
js 效率组装字符串,主要是利用了数组原理。2009-12-12
这篇文章主要介绍了js实现数字每三位加逗号的方法,以实例形式讲述了js实现数字每三位加逗号的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本篇文章主要介绍了微信小程序分页加载的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论