Autofocus on input field when div slides down

jquery css input autofocus
Elmer Almeida picture Elmer Almeida · Sep 15, 2012 · Viewed 54.9k times · Source

I have is a hidden div. When the button is clicked, the div slides down with an input field. How do I make this input field autofocus as soon as the div slides down? Thanks.

<input type="text" name="comment_field" id="comment_field" placeholder="Comment..." />

is what I have and is in a div

$("#status_comments_"+a).slideDown();
    $("#comment_field").focus();

I tried to use the above, but that didn't work.

Answer

undefined picture undefined · Sep 15, 2012

You can use slideDown's callback function which is executed when animation is complete.

$("#status_comments_"+a).slideDown(function(){
    $("#comment_field").focus();
});

Note that IDs must be unique, otherwise your ID selector only selects the first element with that specific ID. If input element is within the div tag you can also code:

$("#status_comments_"+a).slideDown(function(){
    $('input', this).focus();
});

Related questions

CSS to align label and input

HTML Code Snippet: <fieldset id="o-bs-sum-buginfo"> <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label> <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" /> <label for="o-bs-sum-bug-ErrorNumber">Error Number</label> <input …

Read More
jQuery on keyboard backspace move to previous input field if becomes empty

I have this jQuery script: $(document).ready(function() { //Focus the first field on page load $(':input:enabled:visible:first').focus(); //Clear all fields on page load $(':input').each(function() { this.value = ""; }); }); //Clear field on focus $('input').focus(function() { …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More