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

最新推荐文章于 2022-01-17 11:50:12 发布

weixin_30621919

最新推荐文章于 2022-01-17 11:50:12 发布

阅读量495

点赞数

CC 4.0 BY-SA版权

文章标签： javascript c# 测试 ViewUI

原文链接：http://www.cnblogs.com/freeliver54/archive/2007/02/28/659011.html

本文介绍了一种方法，用于在网页中使Button按钮不响应Enter键，仅响应鼠标点击，并实现了Enter键到Tab键的功能转换。具体而言，当TextBox1非空时按Enter键，光标会移至TextBox2；当TextBox2非空时按Enter键，光标会移至Button；当光标位于Button上时按Enter键，光标会返回TextBox1。

案例如下：
一般情况下
当一个页面有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");
    }
}

转载于:https://www.cnblogs.com/freeliver54/archive/2007/02/28/659011.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。