如何解决页面中的回车焦点事件

公司项目里面一直遗留的一个问题：“网页的头部分是个控件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">

 1function document.onkeydown()
 2                {      
 3                    if(event.keyCode==13)  //响应回车事件
 4                    {     
 5                        if(event.srcElement.name=="<%= txtUid.ClientID %>") //得到事件源的id是不是我们预期中的id,若是将回车事件叫给下面的按钮来做，
 6                        //若不是就响应PageHead控件里头的按钮事件，这个event在上次有介绍过的
 7                            {                          
 8                               document.getElementById("<%= btnLogin.ClientID %>").click();
 9                               return false;   
10                            }
11                            else if(document.getElementById("PageHead1_txtKeyword").value!="")
12                            {
13                                document.getElementById("PageHead1_imgbtnGo").click();       
14                                return false;
15                            }   
16                            else
17                            {   
18                                return false;
19                            }                            
20                    }
21                }
22

         
下面这个js就是判断用户输入的用户名和密码不能为空的：

 1 function CheckTxt()
 2                { 
 3                   if( document.getElementById("<%= txtUid.ClientID %>").value ==""||document.getElementById("<%= txtPwd.ClientID %>").value =="")
 4                   {
 5                      alert("请输入用户名和密码");
 6                      document.getElementById("<%= txtUid.ClientID %>").focus();   
 7                      return false;
 8                   }
 9                   else
10                   {
11                   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应该可以消失了，

转载于:https://www.cnblogs.com/hzuIT/articles/832391.html