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>

Why do you want to add the :focus selector via jQuery? Why not just put it in your CSS? — Kevin Boucher, Apr 16 '15 at 18:37
possible duplicate of [JavaScript set focus to HTML form element](http://stackoverflow.com/questions/17500704/javascript-set-focus-to-html-form-element) — Al.G., Apr 16 '15 at 18:38
@Neps That doesn't work, not even in the console with the modal open. — ahimmelstoss, Apr 16 '15 at 18:39
If the `focus()` function doesn't work, then please replicate your problem in a JSFiddle... the problem might be elsewhere. — GreyRoofPigeon, Apr 16 '15 at 18:47
Yep sorry! `Maybe because of the modal needing to render first?` Ya, element need to be available in DOM prior to be focused. So you'd have better to post relevant code regarding this `modal`, surely it has a event to bind once it is opened — A. Wolff, Apr 16 '15 at 19:01
@A.Wolff yeah I'm thinking it's something like that? One thing tho is that the modal is rendered as a partial on the page load. the button just triggers that modal? — ahimmelstoss, Apr 16 '15 at 19:03
@A.Wolff just checked and the element i'm trying to bring into focus is available in the DOM as soon as the page is loaded — ahimmelstoss, Apr 16 '15 at 19:08
@ahimmelstoss - Sounds to me like the modal copies the HTML of the partial and displays it in a modal, meaning that there's a duplicate set of elements that are in the partial in the DOM. What we really need to see is the code that is used to display the modal. — Adam Jenkins, Apr 16 '15 at 19:16
@ahimmelstoss - I meant the JavaScript that displays the modal, not what renders the HTML onto the page in the first place. Are you using a library to display the modal? — Adam Jenkins, Apr 16 '15 at 22:48
@Adam Sorry I should have specified, yes it's a Bootstrap modal. — ahimmelstoss, Apr 17 '15 at 13:43

score 3 · Answer 1 · answered Apr 16 '15 at 18:41

3

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

answered Apr 16 '15 at 18:41

GreyRoofPigeon

17,833
4
36
59

This works for me in a demo/snippet, but not in the context of my application. I wonder if the modal has something to do with it? – ahimmelstoss Apr 16 '15 at 18:57
Do you have more than one element with the class 'bio-input'? – entropic Apr 16 '15 at 19:00
@entropic nope, just doubled checked. – ahimmelstoss Apr 16 '15 at 19:04

score 2 · Answer 2 · answered Apr 16 '15 at 18:41

2

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

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

answered Apr 16 '15 at 18:41

Codey

171
7

score 2 · Accepted Answer · answered Apr 17 '15 at 14:15

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.

Awesome, that did it. Didn't consider the modal being a part of it. Thanks! — ahimmelstoss, Apr 17 '15 at 14:27

Add css :focus selector via jQuery

3 Answers3