Loading...

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

View: 693    Dowload: 0   Comment: 0   Post by: hanhga   Category: ASP.NET Framework   Fields: Other

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="" />
?
 

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

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

Posted on 01-09-2016 

Comment:

To comment you must be logged in members.

Files with category

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd