Databases
StackOverflow2013
Postsdbo
POJQuery focus on first text box or textarea when page loads
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery focus on first text box or textarea when page loads
    text
    copied!<p>I am attempting to write a JQuery to focus on the first <em>visible, enabled</em> text box or textarea in the second form when a page loads. In the example below, focus on input <strong>text2</strong> in <strong>form2</strong>. </p> <p>The solution proposed in <a href="https://stackoverflow.com/questions/4026091/jquery-dynamically-focus-on-the-first-input-or-textarea">jQuery Dynamically focus on the first INPUT or Textarea</a> does not work for me.</p> <p>Please note that we have multiple pages in our application. In some pages the first field of the form is a text box and in other pages the first field is a textarea. I want to write one JQuery method which will do the job for all the pages regardless of whether the first field is a text box or a textarea. In the example below, the solution should work if we swap the <strong>textarea1</strong> and <strong>text2</strong> fields around.</p> <pre><code>&lt;div id="header"&gt; &lt;form name="form1"&gt; &lt;input type="text" name="text1"&gt; &lt;/form&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;form name="form2"&gt; &lt;input type="checkbox" name="chc" value="test"&gt;&lt;br&gt; &lt;input type="hidden" name="hide"&gt; &lt;input type="text" name="text2"&gt;&lt;br&gt; &lt;textarea name="textarea1"&gt;&lt;/textarea&gt;&lt;br&gt; &lt;input type="text" name="text3"&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>This is what I have tried so far...</p> <pre><code>// 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(); </code></pre> <p>Thank you.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload