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
– Kevin Boucher, Commented Apr 16, 2015 at 18:37
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
– A. Wolff, Commented Apr 16, 2015 at 19:01
@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
– Adam Jenkins, Commented Apr 16, 2015 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
– Adam Jenkins, Commented Apr 16, 2015 at 22:48

GreyRoofPigeon · Accepted Answer · 2015-04-16 18:41:57Z

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, 2015 at 18:41

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ahimmelstoss Over a year ago

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?

entropic Over a year ago

Do you have more than one element with the class 'bio-input'?

ahimmelstoss Over a year ago

@entropic nope, just doubled checked.

Adam Jenkins · Accepted Answer · 2015-04-17 14:15:19Z

2

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.

answered Apr 17, 2015 at 14:15

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

1 Comment

ahimmelstoss Over a year ago

Awesome, that did it. Didn't consider the modal being a part of it. Thanks!

Codey · Accepted Answer · 2015-04-16 18:41:45Z

2

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

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

answered Apr 16, 2015 at 18:41

Codey

1717 bronze badges

Collectives™ on Stack Overflow

Add css :focus selector via jQuery

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related