jQuery Set Focus on First Textbox during Page load or Particular Textbox on Page load

By: Suresh Dasari Oct 23, 2012

Introduction:

Here I will explain how to set focus on first or particular textbox during pageload using jQuery in asp.net.

Description:

In previous articles I explained jQuery Countdown timer script example, jQuery Increase or Decrease font size of website, Redirect to another page after some time delay, jQuery slideUp slideDown toggle effects and many articles relating to JQuery and asp.net. Now I will explain how to set focus on first or particular textbox during pageload using jQuery in asp.net.

To set focus on first textbox we need to write the code like as shown below

$(document).ready(function() {

$('input:text:first').focus();

})

</script>

If you want to set focus on particular textbox then use textbox id for that we need to write the code like as shown below

$(document).ready(function() {

$('#txtUserName').focus();

});

</script>

If you want to see this with complete example check below code

Example

<title>Set focus in first textbox or particular textbox during page load</title>

</script>

$(document).ready(function() {

// Set focus in first textbox during page load

$('input:text:first').focus();

// Set focus in location textbox when click on button

$('#btnClick').click(function() {

$('#txtLocation').focus();

});

</script>

</head>

<body>

<div>

<b>UserName:</b> <input type="text" id="txtUserName" /><br />

<b>Location:</b> <input type="text" id="txtLocation" /><br />

</div>

</form>

</body>

</html>

Live Demo

To check Live demo check below textbox and click on button to set focus in location textbox

UserName:
Location:

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview