通过jQuery添加css：focus selector

Question

I have a Bootstrap modal with a form that is triggered when two buttons on the page are clicked.

When one specific button is clicked, I want a specific input field within the form to be in focus, as in the cursor is in that field and the styling for :focus is applied.

$('.bio-input').focus(); does not seem to work (although it works in the code snippet). Even though this element I'm trying to bring into focus is in a modal, the modal is rendered on page load as a partial, so the element is available in the DOM on click.

At the bottom of my view (slim), I have the partial that holds the modal:

 = render partial: 'users/profile/edit_profile_modal'

The modal has an id of #popup-editprofile .

Then, below, my button tag has that id as the data-target, and the data-toggle is 'modal'.

Thanks in advance for your help.

 $(document).ready(function() { $('.edit-bio-btn').click(function() { $("#bio-input").focus(); }) }); 

 #bio-input:focus { border-left: 5px solid orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button name="button" type="submit" class="button btn btn-xs edit-bio-btn" data-target="#popup-editprofile" data-toggle="modal"><i class="fa fa-pencil"></i><span>Edit bio</span></button> <textarea name="profile[bio]" id="bio-input" placeholder="Enter Bio" class="form-control edit-profile-input"></textarea> 

Answer 1

You can use the focus() function. Once the button is clicked, the input field will be focused.

$('.edit-bio-btn').click(function() {
    $('input.thisClass').focus();
})

DEMO

Answer 2

Try this: http://jsfiddle.net/mgm1k5s7/

$("#button").on("click", function () {
    $("#input").focus();
});

Answer 3

Bootstrap Modal Events: http://getbootstrap.com/javascript/#modals-events

After you finally provided the information that you were using a bootstrap modal, the answer becomes clear:

$('#id-of-modal-element').on('shown.bs.modal',function() {
  $('.bio-input',this).focus();
});

This snippet says, when your modal element fires the shown.bs.modal event, focus on the .bio-input element that is inside of that modal.

If this doesn't work for you, then you've got to provide a link to your page, or code that reproduces your issue.