• 屏蔽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");
        }
    }

  • 相关阅读:
    解决linux下svn update 产生Node remains in conflict的问题
    实现本地svn目录同步时,服务器的相应目录保持自动同步
    linux下搭建SVN
    linux下安装pip与pip安装
    CentOS7下将Python的版本升级为3.7
    Linux基础二:初识linux命令
    泛型数组 + 记录类型 + Json 之间的转换
    TDictionary字典 记录 的赋值。
    TDictionary字典 对象的释放。。。
    基于 Intraweb 和 JQuery 的开发套件
  • 原文地址:https://www.cnblogs.com/freeliver54/p/659011.html
Copyright © 2020-2023  润新知