屏蔽Button按钮对Enter回车键的响应 及实现Enter->Tab效果

案例如下:
一般情况下
当一个页面有TextBox以及Button的时候
当光标停留在TextBox上 此时按Enter键 回车
就会发现光标将焦点停留在Button上
并且触发了Button的按钮事件

本例实现如下效果
0.一个包含[姓名TextBox1]和[备注TextBox2]以及[确定Button按钮]的页面
1.屏蔽按钮对回车键的响应 而只响应鼠标的点击
2.以及实现Enter键->Tab键的转换
  即TextBox1非空时 按回车键 光标转到TextBox2
  当TextBox2非空时 按回车键 光标转到Button
  当光标停留在Button上时 按回车键 光标转到TextBox1
---------------------------------------
相关代码示例如下:

 1 <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2"  %>
 2 < html >
 3 < head  id ="Head1"  runat ="server" >
 4      < title > 屏蔽Button按钮对Enter键的响应 </ title >
 5      < script  language ="javascript"  type ="text/javascript" >
 6       
 7        //TextBox1的 onkeydown事件
 8        //若TextBox1非空 则光标停留在TextBox2
 9        function TextBox1onKeyDown()
10        {
11            if(event.keyCode==13)
12            {
13                if(document.all.TextBox1.value=="")
14                {
15                    document.all.TextBox1.focus();
16                    event.keyCode = 0;
17                    event.returnValue = false;                    
18                }

19                else
20                {
21//                  event.keyCode=9;//Enter键->Tab键
22                    document.all.TextBox2.focus();
23                    event.keyCode = 0;
24                    event.returnValue = false;   
25                }

26            }

27        }

28        
29        //TextBox2的 onkeydown事件
30        //若TextBox2非空 则光标停留在Button1
31        function TextBox2onKeyDown()
32        {            
33            if(event.keyCode==13)
34            {
35                if(document.all.TextBox2.value=="")
36                {
37                    document.all.TextBox2.focus();
38                    event.keyCode = 0;
39                    event.returnValue = false;                    
40                }

41                else
42                {
43//                  event.keyCode=9;//Enter键->Tab键
44                    document.all.Button1.focus();
45                    event.keyCode = 0;
46                    event.returnValue = false;   
47                }

48            }

49        }

50        
51        //Button1的 onkeydown事件
52        //如果是回车键
53        //则光标停留在TextBox1
54        //不触发按钮事件
55        function Button1onKeyDown()
56        {
57            if(event.keyCode==13)
58            {
59                document.all.TextBox1.focus();
60                event.keyCode = 0;
61                event.returnValue = false;                    
62            }

63        }
      
64
65        //Button1的 onClick事件
66        function btnOnClick()
67        {
68            alert(event.keyCode);
69            alert('onclick');
70        }

71        
72    
</ script >
73 </ head >
74 < body >
75      < form  id ="form1"  runat ="server" >
76          < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
77          < asp:TextBox  ID ="TextBox2"  runat ="server" ></ asp:TextBox >
78          < asp:Button  ID ="Button1"  runat ="server"  Text ="Button"  OnClick ="Button1_Click"    />
79      </ form >
80 </ body >
81 </ html >


后台代码:
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            this.TextBox1.Attributes.Add("onkeydown", "TextBox1onKeyDown();");
            this.TextBox2.Attributes.Add("onkeydown", "TextBox2onKeyDown();");
            this.Button1.Attributes.Add("onkeydown", "Button1onKeyDown();");
            this.Button1.Attributes.Add("onclick", "btnOnClick();");
            this.TextBox1.Focus();
        }
    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Write("onclickServer");
    }
}

你可能感兴趣的:(button)