locked
On key press RRS feed

  • Question

  • User66371569 posted
    I have 3 textboxes each textbox has button

    Textbox1.Text Button1

    Textbox2.Text Button2

    Textbox3.Text Button3

    What i want when i write in textbox1 and press keyboard Enter Button1 code gets run
    and same with others textboxes


    How can i do that
    Sunday, March 3, 2019 4:19 PM

All replies

  • User475983607 posted

    I have 3 textboxes each textbox has button

    Textbox1.Text Button1

    Textbox2.Text Button2

    Textbox3.Text Button3

    What i want when i write in textbox1 and press keyboard Enter Button1 code gets run
    and same with others textboxes


    How can i do that

    JavaScript is used to write UI handlers in ASP.NET Web Forms.

    jQuery example.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquerydemo.aspx.cs" Inherits="WebFormsApp.jquerydemo" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_Click" />
            </div>
            <div>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_Click" />
            </div>
            <div>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                <asp:Button ID="Button3" runat="server" Text="Button 3" OnClick="Button3_Click" />
            </div>
            <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
        </form>
        <script>
    
        $(document).keypress(function (e) {
            if (e.keyCode === 13) {
                if ($('#<%=TextBox1.ClientID%>').is(":focus")) {
                    $("#<%=Button1.ClientID%>").click();
                }
                if ($('#<%=TextBox2.ClientID%>').is(":focus")) {
                    $("#<%=Button2.ClientID%>").click();
                }
                if ($('#<%=TextBox3.ClientID%>').is(":focus")) {
                     $("#<%=Button3.ClientID%>").click();
                }
    
                return false;
            }
        });
        </script>
    </body>
    </html>
    
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormsApp
    {
        public partial class jquerydemo : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                Label1.Text = "You clicked Button 1";
            }
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                Label1.Text = "You clicked Button 2";
            }
    
            protected void Button3_Click(object sender, EventArgs e)
            {
                Label1.Text = "You clicked Button 3";
            }
        }
    }

    Sunday, March 3, 2019 5:13 PM
  • User-893317190 posted

    Hi thepast,

    You could also bind the event to your textbox.

    Below is my code.

      <form id="form1" runat="server">
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
              <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button2" runat="server" Text="Button"  OnClick="Button2_Click" />
              <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" />
        </form>
    
    </body>
        <script>
            $(function () {
                $("input[type=text]").keyup(function (e) {
                   
                    if (e.keyCode === 13) {
                        $(this).next(":submit").click();// find the next button of textbox and trigger its click event
                    }
                })
    
                $("form").keydown(function (e) {  // prevent the form from aotu submitting when clicking enter keyboard
                    if (e.keyCode === 13) {
                        e.preventDefault()
                    }
                })
            })
        </script>

    Code behind.

     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
            Response.Write("Button1 clicked")
        End Sub
    
        Protected Sub Button2_Click(ByVal sender As Object, ByVal e As EventArgs)
            Response.Write("Button2 clicked")
        End Sub
    
        Protected Sub Button3_Click(ByVal sender As Object, ByVal e As EventArgs)
            Response.Write("Button3 clicked")
        End Sub

    Best regards,

    Ackerly Xu

    Monday, March 4, 2019 3:10 AM