Wednesday 16 April 2014

How to set focus on first or particular textbox during page load using JQuery in ASP.NET

In this article I will explain how to set focus on first or particular textbox during page load using JQuery in ASP.NET

In this scenario we need to write code for focus on first or particular textbox.

Example 1: Focus First Textbox

<script type="text/javascript">
$(document).ready(function () {
$('input:text:first').focus();
});
</script>

Example 2: Focus Particular Textbox

<script type="text/javascript">
$(document).ready(function () {
$(#txtFirstName').focus();
});
</script>

Below is the total code Textbox focus.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Set focus in particular textbox </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

// Focus first textbox

<script type="text/javascript">
$(document).ready(function () {
$('input:text:first').focus();
});
</script>

(Or)

// Focus Particular textbox

<script type="text/javascript">
$(document).ready(function () {
$(#txtFirstName').focus();
});
</script>

</head>
<body>
<form id="form1" runat="server">
<table align="Center">
<tr>
<td colspan="2">Set focus in particular textbox or First textbox
</td>
</tr>
<tr>
<td colspan="2" height="20px"></td>
</tr>
<tr>
<td>FirstName :</td>
<td>
<asp:TextBox runat="server" ID="txtFirstName" /></td>
</tr>
<tr>
<td>LastName :</td>
<td>
<asp:TextBox runat="server" ID="txtLastName" /></td>
</tr>
<tr>
<td>Location :</td>
<td>
<asp:TextBox runat="server" ID="txtLocation" /></td>
</tr>
<tr>
<td>City :</td>
<td>
<asp:TextBox runat="server" ID="txtCity" /></td>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btnSave" Text="Save" />
</td>
<td>
<asp:Button runat="server" ID="btnCancel" Text="Cancel" />
</td>
</tr>
</table>
</form>
</body>

</html>

No comments:

Post a Comment