如何解决页面中的回车焦点事件
2007-07-26 13:47
211 查看
公司项目里面一直遗留的一个问题:“网页的头部分是个控件PageHead,里面包含有个文本框txtKeyword和搜索按钮imgbtnGo,这是为了客户好在任何时候任何页面可以去搜索产品设计的,还一个功能就是当客户直接在该文本框中输入关键字后回车的时候就响应的是后面的搜索按钮的事件,这个单独的实现我相信谁都没有问题,但是现在是有的页面例如登录页面吧,也有文本框要输入用户名txtUname和密码txtPwd,也有登陆按钮btnLogin的事件,我们也要设计这个里面输入用户名和密码后回车响应的是后面的登陆按钮的事件,这样一来就有冲突了呀,到底在一个页面是响应哪个按钮呢,我试过是响应的头部分控件中的搜索按钮的事件,随便你怎么输入用户名和密码,针对这个问题我们一直都在找个好的解决方案,经过我在工作之余的研究,总算试出了一种比较令人满意的方法:
先是在PageHead里面写个javascript的函数用来验证这个里面的txtKeyword是否为空:
<script language="javascript" type="text/javascript">
function CheckNull()
{
if(document.getElementById('<%= txtKeyword.ClientID %>').value=="")
{
alert("您必须输入你要搜索的产品关键字, 谢谢!");
document.getElementById("<%= txtKeyword.ClientID %>").focus();
return false;
}
else
{
return true;
}
}
</script>
然后在按钮的属性里面加上OnClientClick="javascript:return CheckNull():
<asp:ImageButton ID="imgbtnGo" ImageUrl="../images/PageHead/GO.gif" runat="server" OnClientClick="javascript:return CheckNull()"></asp:ImageButton>
然后在服务器端PageLoad的时候给文本框txtKeyword注册一个事件:
txtKeyword.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + imgbtnGo.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
就这样头部分PageHead控件的工作就写好了,然后到登录的页面部门中:
第一件事:给每个要输入的文本框如:txtUname和txtPwd在PageLoad的时候注册事件:
txtUname.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + btnLogin.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
txtPwd.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + btnLogin.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
然后在客户端写javascript:
<script language="javascript" type="text/javascript">
function document.onkeydown()
2
下面这个js就是判断用户输入的用户名和密码不能为空的:
function CheckTxt()
2 if( document.getElementById("<%= txtUid.ClientID %>").value ==""||document.getElementById("<%= txtPwd.ClientID %>").value =="")
4 alert("请输入用户名和密码");
6 document.getElementById("<%= txtUid.ClientID %>").focus();
7 return false;
8 }
9 else
10 return true;
12 }
13 }然后在登录按钮的里面写下响应上面的CheckTxt函数就好了:
<asp:ImageButton ID="btnLogin" runat="server" Width="55" Height="49" ImageUrl="../images/login/btn_login_L.gif"
OnClientClick="javascript:return CheckTxt()" TabIndex="3" OnClick="btnLogin_Click">
这样就可以来控制我们的回车了,我们把鼠标放在输入用户名和密码的文本框里面敲回车的话响应的是登陆的按钮事件,我们把鼠标放在头部分的搜索关键字的文本框里面敲回车就是响应的PageHead控件的搜索事件,终于解决了这个问题,从此页面上那个bug应该可以消失了,
![](http://www.cnblogs.com/CuteSoft_Client/CuteEditor/images/emsmile.gif)
2007年12月29日新加的一个Demo链接地址:
http://files.cnblogs.com/teracy/WebApp_test.rar
先是在PageHead里面写个javascript的函数用来验证这个里面的txtKeyword是否为空:
<script language="javascript" type="text/javascript">
function CheckNull()
{
if(document.getElementById('<%= txtKeyword.ClientID %>').value=="")
{
alert("您必须输入你要搜索的产品关键字, 谢谢!");
document.getElementById("<%= txtKeyword.ClientID %>").focus();
return false;
}
else
{
return true;
}
}
</script>
然后在按钮的属性里面加上OnClientClick="javascript:return CheckNull():
<asp:ImageButton ID="imgbtnGo" ImageUrl="../images/PageHead/GO.gif" runat="server" OnClientClick="javascript:return CheckNull()"></asp:ImageButton>
然后在服务器端PageLoad的时候给文本框txtKeyword注册一个事件:
txtKeyword.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + imgbtnGo.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
就这样头部分PageHead控件的工作就写好了,然后到登录的页面部门中:
第一件事:给每个要输入的文本框如:txtUname和txtPwd在PageLoad的时候注册事件:
txtUname.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + btnLogin.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
txtPwd.Attributes.Add("onkeydown", "if(event.keyCode==13){document.all." + btnLogin.ClientID + ".focus();event.keyCode=13;event.keyCode=13;return true;}");
然后在客户端写javascript:
<script language="javascript" type="text/javascript">
function document.onkeydown()
2
下面这个js就是判断用户输入的用户名和密码不能为空的:
function CheckTxt()
2 if( document.getElementById("<%= txtUid.ClientID %>").value ==""||document.getElementById("<%= txtPwd.ClientID %>").value =="")
4 alert("请输入用户名和密码");
6 document.getElementById("<%= txtUid.ClientID %>").focus();
7 return false;
8 }
9 else
10 return true;
12 }
13 }然后在登录按钮的里面写下响应上面的CheckTxt函数就好了:
<asp:ImageButton ID="btnLogin" runat="server" Width="55" Height="49" ImageUrl="../images/login/btn_login_L.gif"
OnClientClick="javascript:return CheckTxt()" TabIndex="3" OnClick="btnLogin_Click">
这样就可以来控制我们的回车了,我们把鼠标放在输入用户名和密码的文本框里面敲回车的话响应的是登陆的按钮事件,我们把鼠标放在头部分的搜索关键字的文本框里面敲回车就是响应的PageHead控件的搜索事件,终于解决了这个问题,从此页面上那个bug应该可以消失了,
![](http://www.cnblogs.com/CuteSoft_Client/CuteEditor/images/emsmile.gif)
2007年12月29日新加的一个Demo链接地址:
http://files.cnblogs.com/teracy/WebApp_test.rar
相关文章推荐
- 一页面多个文本框回车提交不同事件问题解决
- asp.net如何在页面加载时响应回车事件
- Jquery向页面append新元素之后,如何解决事件的绑定问题?
- 在ASP.NET登录页面中如何实现文本框焦点自动跳转及通过回车键提交表单
- asp.net如何在页面加载时响应回车事件
- 用户控件包含一个搜索功能,但是在调用页面中按回车时无法直接提交这个表单,只有鼠标点击才提交,如何解决?
- asp.net如何在页面加载时响应回车事件
- asp.net如何在页面加载时响应回车事件
- asp.net如何在页面加载时响应回车事件
- Jquery和Js如何在页面触发回车事件(或者其他html控件)
- 当回车关联查询按钮时,如何解决页面重新刷新的问题!
- 如何解决按回车键激发Textbox的TextChanged事件的同时,激发Button的Onclick事件
- Ajax两招 必备(Calendar显示中文)(解决页面回车事件问题)
- 一页面多个文本框回车提交不同事件问题解决
- jQuery执 4000 行完一个输入框的回车事件代码之后,会自动刷新页面解决办法
- web页,如何按回车获得焦点,触发web控件事件..?
- 如果dom节点是动态添加进页面的,在页面节点绑定事件如何解决的问题。
- asp.net如何在页面加载时响应回车事件
- 解决vue+element 键盘回车事件导致页面刷新的问题
- Android 如何让EditText不自动获取焦点 在项目中,一进入一个页面, EditText默认就会自动获取焦点。 那么如何取消这个默认行为呢? 在网上找了好久,有点 监听软键盘事件