Ashish Patel

How to set focus on first textbox of the page

Below I have given the complete sample code where the cursor will be placed on first textbox when the page loads.

Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ashish's Blog</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('form input:text:enabled:first').focus();
        }); 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:TextBox ID="TextBox1" runat="server" />
 
    <asp:TextBox ID="TextBox2" runat="server" />
 
    <asp:TextBox ID="TextBox3" runat="server" />
 
    <asp:TextBox ID="TextBox4" runat="server" />
 
    </form>
</body>
</html>

UPDATE:

If you first textbox is disabled

$(document).ready(function() {
    $('input[type=text]:enabled:first').focus();
});

If you first textbox is not visible

$(document).ready(function() {
    $('input[type=text]:visible:first').focus();
});

Thanks.

Posted in ASP.Net, Classic ASP, JQueryTagged 2 Comments

2 responses to “How to set focus on first textbox of the page”

  1. Hi,

    Your code works well but it gets failed when my first text box was not visible. It was set to invisible using css.

    Thanks.

    Reply

Leave a Reply