By 06/02/2014 8 Comments

How To Shift Focus to Next ASP.NET TextBox on Enter Key press using jQuery

Shift focus to next asp.net control

  • When user fills online form on the web, by default he / she press tab button to walk thorough to the next textBox, our requirement is instead of press tab button, user press enter key and go to next textBox in entire form
  • We can achieve this in asp.net using JQuery

Description

This example uses the bind() function that binds one or more events to a handler. The key is detected using the keyCode or charCode.

Following code describes, How user walks trough to each textBox via pressing enter key controls in asp.net using JQuery

JQuery code snippet

<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script> <!-- call jquery file or library into asp.net page --->
    <script>
        $(document).ready(function() { // this is a function which is called by browser when it loads a webpage

            $('input:text:first').focus(); // focus() method triggered and set cursor in first textfield
            var $txtinput = $('input:text'); // get all textBoxes, assign into a variable
            $txtinput.bind('keydown', function (e) { // trigger bind() function which binds one or more events to the handlers, pass 2 parameters from it, first is keydown event, second is unknown function
                var key = (e.keyCode ? e.keyCode : e.charCode); // key press detected using the keyCode or charCode property
                if (key == 13) { // check if pressed key is equal to 13
                    e.preventDefault(); // prevents from submit to server
                    var indexNext = $txtinput.index(this) + 1; // add one to index next variable
                    $(":input:text:eq(" + indexNext + ")").focus(); // go to next textfield

                    }
            });

        });

    </script>

ASP.NET code snippet

<!--- following code renders the text fields and a label control on browser ---->

<asp:Label runat="server" Text="Enter text and hit Enter to move to next text box"></asp:Label>
        <br/>
        <asp:TextBox ID="TT_TextBox1" runat="server" Text="" />
        <asp:TextBox ID="TT_TextBox2" runat="server" Text="" />
        <asp:TextBox ID="TT_TextBox3" runat="server" Text="" />
        <asp:TextBox ID="TT_TextBox4" runat="server" Text="" />






Posted in: ASP.NET, jQuery

Leave your valuable Comment

Have a natural attraction for women cosmetics and replica watches uk clothes, no
more than two for men the most attractive one, is to make their own driving experience, happy and can serve as the facade of the car, another is to highlight the taste edify sentiment rolex replica watch. The replica rolex is undoubtedly the most fashionable accessories, wear a suit to attend the activities, but also get a decent match on the replica watches .