Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

Shift focus to next control by pressing Enter key using jQuery in ASP.NET

Author: Jeff Nava

In this article, we will learn how to shift focus to next control by pressing Enter key using jQuery in ASP.NET.

 

jQuery offers several advantages to write client side code in your application. You can do lot of functionality on client side using jQuery. I have written an article on DevASP.NET to implement keyboard shortcuts using jQuery. jQuery has much more to offer and I will discuss one in this article.

Most input forms on websites have many text boxes or input fields. Many users like to press “Enter” key instead of “Tab” key to shift focus to next input field in the form.

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > NewFolder and rename the folder as “Scripts”
  5. Add “jquery-1.4.1.min.js” file in this folder. This is jQuery file that we will use in our example. You have to download it to add it in the folder.
  6. Write below <script> tag in between <head> tag of aspx page

    <head runat="server">
        <title>Shift Focus to Next Control by pressing Enter key using jQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    </head>

     
  7. Write below code in between <form> tag of aspx page

    <div>
        <asp:TextBox ID="TextBox1" runat="server" class="next"></asp:TextBox>
        <asp:TextBox ID="TextBox2" runat="server" class="next"></asp:TextBox>
        <asp:TextBox ID="TextBox3" runat="server" class="next"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" class="next" />
    </div>
     
    Attribute “class” is used to define a class which we will use in our jQuery code.
     
  8. If you want to shift focus only to text boxes then write below code in between  <head>  tag.

    <head runat="server">
        <title>Shift Focus to Next Control by pressing Enter key using jQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
     
        <script type="text/javascript">
            $(function () {
                $('input:text:first').focus();
                var $inp = $('input:text');
                $inp.bind('keypress', function (e) {
                    var key = e.which;
                    if (key == 13) {
                        e.preventDefault();
                        var nextIndex = $inp.index(this) + 1;
                        $('input:text')[nextIndex].focus();
                    }
                });
            });
        </script>
    </head>
     
    Bind the keypress event handler for Text boxes.  In function, detect the key using “e.which”. if the key Enter is pressed than prevent the default behavior of the Enter key. To get index of the next control, first get the index of the current control and add one to it. Now shift focus to next control using this index. 
     
  9. Save file and press F5. Now press Enter to shift to next Text box
     
  10. If you have a button in you form and you want to shift focus to button as well with Enter key and want to click button with Enter key then write below code in between  <head>  tag

    <head runat="server">
        <title>Shift Focus to Next Control by pressing Enter key using jQuery</title>
        <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
     
        <script type="text/javascript">
            $(function () {
                $('.next:first').focus();
                var $inp = $('.next');
                $inp.bind('keypress', function (e) {
                    var n = $('.next').length;
                    var key = e.which;
                    if (key == 13) {
                        e.preventDefault();
                        var nextIndex = $inp.index(this) + 1;
                        if (nextIndex < n) {
                            $('.next')[nextIndex].focus();
                        }
                        else {
                            $('#Button1').click();
                        }
                    }
                });
                $('#Button1').click(function () {
                    alert('Button Clicked');
                });
            });
        </script>
    </head>
     
    Use class to shift focus to next control. Focus will be shifted to next control that belongs to the class. “next” class is used for this example. To click Button on Enter key, get the count of controls. Shift focus to next control until the Button control at the end. When reached to Button control then call the click event of the Button.
    In click event of the Button provide your code.
     
  11. Save file and press F5. Now press Enter to shift to next control and press enter to click button.

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to save Image in SQL Server Database in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net