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

View: 535    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: ASP.NET Framework   Fields: Other

10 point/1 review File has been tested

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

Introduction

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

Build Shift Focus to Next ASP.NET TextBox on Enter Key press using jQuery Posted on 01-09-2016  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 10/10 535

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd