zoukankan      html  css  js  c++  java
  • 屏蔽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");
        }
    }

  • 相关阅读:
    【465】词干提取与词形还原
    【464】文本转字符向量bag of words
    【462】淘宝个人简介
    Docker 图形化页面管理工具使用
    Docker 简介与shell操作使用
    Spring Boot 入门案例与配置说明
    项目管理工具Maven的安装与使用
    Git(五)IDEA应用Git
    Git(四)Git的分支管理
    Git(三)Git的远程仓库
  • 原文地址:https://www.cnblogs.com/freeliver54/p/659011.html
Copyright © 2011-2022 走看看