Add css :focus selector via jQuery

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