jQuery and ASP.NET

September 8, 2009

Set Focus to the First TextBox on a Page using jQuery




While browsing the asp.net forums, I came across a question where a user wanted to set focus to the first textbox in a Page. The condition here was the TextBox had to be enabled. Here’s how to do so:

HTML Page

<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Select the First Enabled TextBox on the Form</title>
<
script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<
script type="text/javascript">
$(function() {
$("input[type='text']:enabled:first").focus();
});
</script>
</
head>
<
body>
<
input id="Text1" type="text" disabled="disabled"/><br />
<
input id="Text2" type="text" disabled="disabled"/><br />
<
input id="Text3" type="text" /><br />
<
input id="Text4" type="text" /><br />
<
input id="Text5" type="text" />
</
body>
</
html>

ASP.NET Page

<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
<
title>Select the First TextBox on the Form</title>
<
script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<
script type="text/javascript">
$(function() {
$("form :input[type='text']:enabled:first").focus();
});
</script>
</
head>
<
body>
<
form id="form1" runat="server">
<
div>
<
asp:TextBox ID="tb1" runat="server" Enabled="false"/><br />
<
asp:TextBox ID="tb2" runat="server" Enabled="false"/><br />
<
asp:TextBox ID="tb3" runat="server"></asp:TextBox><br />
<
asp:TextBox ID="tb4" runat="server"></asp:TextBox><br />
<
asp:Button ID="Button1" runat="server" Text="Button" /><br />
</
div>
</
form>
</
body>
</
html>

OUTPUT

image

As you can observe, the focus is set to the third textbox since the first two are disabled.


Bookmark this link on del.icio.us (saved by 0 users)

Did you like this post?
kick it on DotNetKicks.com
subscribe via rss subscribe via e-mail
print this post follow me on twitter
Others Also Read..

comments

3 Responses to "Set Focus to the First TextBox on a Page using jQuery"
  1. Mike Knowles said...
    September 10, 2009 7:50 PM

    Good one, thanks.

  2. Anonymous said...
    January 20, 2010 9:45 PM

    good one :) - vinoth

  3. Anonymous said...
    June 12, 2010 4:50 AM

    Tks! Help me a lot.

 

Copyright 2010 All Rights Reserved DevCurry.com by Suprotim Agarwal