jQuery Focus Examples – Set Focus on Textbox, Textarea, Select, Checkbox, Radiobutton
Have you ever wanted to set focus on Textbox, Textarea, Select, etc. using jQuery, but didn’t know how to proceed? In this article, I am going to share a very easy and simple way to set focus in jQuery. Actual code is just 1 line, so it’s super easy to follow.
Examples on using jQuery to Set Focus on an element
Let’s assume we have few form elements in our web page. Here’s the HTML source code I am using for the example. jQuery on focus examples will follow after the display of the HTML source code. The following code will include jQuery Input focus so that you can focus textbox, focus textarea and focus select dropdowns. So make sure that you read through the rest of the article.
Following is the basic HTML source code. Actual jQuery code will follow below this code as examples.
<html> <head> <title>jQuery Focus | Set Focus | Focus Textbox, Textarea, Select Examples</title> <script type="text/javascript" src="js/jquery_1.7.1_min.js"></script> </head> <body> <form name="form1" method="post" action=""> <p> <label for="city">City</label> <br> <input type="text" name="city" id="city"> </p> <p> <label for="comments">Comments<br> </label> <textarea name="comments" id="comments" cols="45" rows="5"></textarea> </p> <p> <label for="country">Country</label> <br> <select name="country" id="country"> <option>Select a value</option> <option value="USA">USA</option> <option value="UK">UK</option> </select> </p> <p> <input type="checkbox" name="email" id="email"> <label for="email">Email</label> <input type="checkbox" name="newsletter" id="newsletter"> <label for="newsletter">Newsletter</label> </p> <p> <label for="subscribe">Subscribe?</label> <br> <input type="radio" name="subscribe" id="subscribe" value="yes"> Yes <input type="radio" name="subscribe" id="subscribe" value="no"> No </p> <input type="submit" name="focus_textbox" id="focus_textbox" value="Focus Textbox" /> <input type="submit" name="focus_textarea" id="focus_textarea" value="Focus Textarea" /> <input type="submit" name="focus_select" id="focus_select" value="Focus Select" /> <br> <input type="submit" name="focus_email" id="focus_email" value="Focus Email" /> <input type="submit" name="focus_newsletter" id="focus_newsletter" value="Focus Newsletter" /> <br> <input type="submit" name="focus_radio" id="focus_radio" value="Focus Radio"> </form> </body> </html>
Here’s individual code to focus different form elements:
Example 1: Set Focus on Textbox when button is clicked using jQuery
<script type="text/javascript">
$(document).ready(function() {
//Focus Textbox
$('#focus_textbox').click(function(){
$('#city').focus();
return false;
});
});
</script>Example 2: Set Focus on Textarea when button is clicked using jQuery
<script type="text/javascript">
$(document).ready(function() {
//Focus Textarea
$('#focus_textarea').click(function(){
$('#comments').focus();
return false;
});
});
</script>Example 3 – Set Focus on Select dropdown when button is clicked using jQuery
<script type="text/javascript">
$(document).ready(function() {
//Focus Select
$('#focus_select').click(function(){
$('#country').focus();
return false;
});
});
</script>Example 4 – Set Focus on Checkbox when button is clicked using jQuery
<script type="text/javascript">
$(document).ready(function() {
//Focus Checkbox
$('#focus_email').click(function(){
$('#email').focus();
return false;
});
$('#focus_newsletter').click(function(){
$('#newsletter').focus();
return false;
});
});
</script>Example 5 – Set Focus on Radio Button when button is clicked using jQuery
<script type="text/javascript">
$(document).ready(function() {
//Focus Radiobutton
$('#focus_radio').click(function(){
$('#subscribe').focus();
return false;
});
});
</script>Your Turn!
Do you know of any other ways to set focus on form elements (input, textbox, textarea, checkbox, radiobutton, etc.) using jQuery? Feel free to suggest by commenting below.
Very nice and helpful tip!
David
July 3, 2012 at 12:47 pm