CODEWITHSUNDEEP
jquerycssinputautofocus
Elmer Almeida
Elmer Almeida

Reputation: 239

Autofocus on input field when div slides down

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.

Upvotes: 16

Views: 66259

Answers (4)

user5004402
user5004402

Reputation: 41

 $("#divId").show().focus();

document.getElementById('divID').focus();

Upvotes: 1

user5004402
user5004402

Reputation: 41

$("#divID").focus();

or without jQuery:

document.getElementById('divID').focus();

Upvotes: 2

Ram
Ram

Reputation: 144709

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();
});

Upvotes: 23

Pranav
Pranav

Reputation: 8871

hidden field cannot gain focus ..so what you need to do is on click of button you have to show them .

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

Upvotes: -1

Related Questions