JQuery focuses on the first text box or text box when the page loads

Question

I am trying to write jQuery to focus on the first visible, included text box or text box in the second form when the page loads. In the example below, focus on typing text2 into form2 .

The solution suggested in jQuery Dynamically focusing on the first INPUT or Textarea does not work for me.

Please note that we have several pages in our application. On some pages, the first form field is a text field, and on other pages, the first field is a text field. I want to write one jQuery method that will do the job for all pages, regardless of whether the first field is a text field or a text field. In the example below, the solution should work if we change the textarea1 and text2 fields.

<div id="header"> <form name="form1"> <input type="text" name="text1"> </form> </div> <div id="content"> <form name="form2"> <input type="checkbox" name="chc" value="test"><br> <input type="hidden" name="hide"> <input type="text" name="text2"><br> <textarea name="textarea1"></textarea><br> <input type="text" name="text3"> </form> </div> 

This is what I have tried so far ...

 // throws the error - $("#content input:text, #content textarea").first is not a function $("#content input:text, #content textarea").first().focus(); // focuses on the textarea even if a text box is the first element in the form $("#content textarea, #content[type='text']:visible:enabled:first").focus(); // focuses on the last text box in the page! $("#content :input[type='text'], :textarea:visible:enabled:first").focus(); // focuses on the first text box even if a textarea is the first element in the form $("#content :input[type='text']:visible:enabled:first, :textarea:visible:enabled:first").focus(); // focuses on the checkbox as it is the first input element $('#content :input:visible:enabled:first').focus(); 

Thanks.

Answer 1

 $("#content input:text, #content textarea").eq(0).focus() 

Answer 2

Here is what you need:

 ​$(function(){ $('form[name=form2]').find(':text, textarea').filter(":visible:enabled").first().focus(); })​ 

Example here

Answer 3

 <script type="text/javascript"> $(document).ready(function() { // focus on the first visible and enabled input field or textarea $(":input:visible:enabled").each(function() { if (($(this).attr('type') == 'text') && ($(this).is('input'))){ $(this).focus(); return false; } if ($(this).is('textarea')){ $(this).focus(); return false; } }); }); </script> 

Answer 4

You should use a DOM element instead of a jQuery object, for example:

 $("#content input:text")[0].focus() 

Answer 5

// throws an error - $ ("# content input: text, #content textarea"). At first, this is not the function $ ("# content input: text, #content text field") first () focus (); ..

This should work fine. Check out jQuery version, the first method added in jQuery 1.4

Answer 6

If you are using Raphael Verger , it could be a password, so:

 ​$(function(){ $('form[name=form2]').find(':text, textarea, :password').filter(":visible:enabled").first().focus(); })​