Autofocus input in twitter bootstrap modal

Question

I have such problem - I need to autofocus some element inside twitter bootstrap modal (after it shows). The tricky part is here - content of this modal is loaded using 'data-remote' (jQuery.load method) from separate HTML file, so

$(document).on('shown', ".modal", function() {
    $('[autofocus]', this).focus();
});

works only if modal was loaded before.
The question is - how to make autofocus work at the first time modal loads?

score 114 · Accepted Answer · answered May 28 '14 at 20:50

114

I'm using Bootstrap 3.0 (hopefully, this works with 3.1 as well).

We had to use tabindex="-1" because that allows the ESC key to close the modal.

So I was able to fix this issue using:

// Every time a modal is shown, if it has an autofocus element, focus on it.
$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

answered May 28 '14 at 20:50

nc.

7,179
5
28
38

3

this is the answer for 3.0 and up – Dylan Hayes Oct 17 '14 at 13:06
Note if you load content remote through data-toggle link, then you should use event `loaded.bs.modal`, then it will also work then you close and reopen modal. – ksvendsen Feb 01 '16 at 14:38
1

See also [@paul-oliver's solution](http://stackoverflow.com/a/33323836/44637) if your modal does not exist at the time you create/assign this handler. – nc. Feb 10 '16 at 08:15
This answer is correct if the modal markup already exists by the time this JavaScript is executed. If you are working with dynamic markup, see the answer provided by @paul-oliver – Aaron Hudon Sep 05 '17 at 05:46

score 29 · Answer 2 · answered Sep 05 '13 at 01:58

29

try removing tabindex="-1" and it works fine.

<div class="modal fade" id="modalID" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal fade" id="modalID" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Hope this helps!

answered Sep 05 '13 at 01:58

nooweel

299
4
3

whoa - this was the only answer i found that solved this. in fact, you can just add the autofocus attribute and it will all just work. – drudru Sep 07 '13 at 09:56
2

When I remove `tabindex="-1"` it is possible to tab out and activate buttons outside of the modal. The solution provided by nc. worked for me. – aimfeld Aug 29 '14 at 10:21
2

Hi, just wanna double check about this solution, I try this one, it works but just once. Did you guys notice that one? Then I try @nc. answer and it work perfectly even with `tabindex="-1"` – ksugiarto Dec 09 '14 at 15:00

Paul Oliver · Answer 3 · 2016-12-02T14:45:20.180

22

I couldn't get @nc's solution working on my app. It didn't see modals that were added later. This worked for me though

$(document).on('shown.bs.modal', '.modal', function() {
  $(this).find('[autofocus]').focus();
});

As Frank Fang points out, you should use this if you are using a newer version of Bootstrap that doesn't rely on the autofocus HTML attribute.

$('#myModal').on('shown.bs.modal', function () {
  // get the locator for an input in your modal. Here I'm focusing on
  // the element with the id of myInput
  $('#myInput').focus()
})

edited Dec 02 '16 at 14:45

answered Oct 24 '15 at 22:02

Paul Oliver

7,531
5
31
34

3

I think this is the solution I'd use for modals that don't exist in the DOM when the JS first runs. – nc. Feb 05 '16 at 04:41
the first one worked on me perfectly! thanks. `[+1]` – kapitan Jul 15 '22 at 02:30

score 6 · Answer 4 · answered Sep 06 '16 at 05:50

Above answers are somewhat outdated for latest Bootstrap versions.

Below is excerpted from: http://getbootstrap.com/javascript/#modals

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})

score 2 · Answer 5 · answered Jul 10 '20 at 18:21

The accepted answers handle focusing on the autofocus button in the modal, but don't restore focus to the main page afterwards. This may be undesirable if you're showing the modal from a form that the user expects to submit afterwards by pressing enter.

So here's the complete code that handles both showing and hiding the modal:

// All modals will take enter to mean clicking the button with the autofocus property
$(document).ready(function () {
    $('.modal').on('shown.bs.modal', function() {
        $(this).find('[autofocus]').focus();
    });
    $('.modal').on('show.bs.modal', function(e) {
        var activeElement = document.activeElement;
        $(this).on('hidden.bs.modal', function () {
            activeElement.focus();
            $(this).off('hidden.bs.modal');    
        });
    });
});

Note: This code clears out all event listeners on the modal's hidden.bs.modal event. If you have other listeners for that event, then you'll need to turn the hidden function into a named function that you can reference and remove by reference from the event listeners.

working fine with Bootstrap 5 ! – Roubi Jul 11 '23 at 23:08 — Roubi, Jul 11 '23 at 23:08

score 0 · Answer 6 · answered Sep 05 '17 at 05:52

You have an input with the autofocus attribute you want focused when the bootstrap modal is shown.

Is your modal markup available when JavaScript is loaded?

Register an event handler on all .modal elements for the shown.bs.modal event

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

Is your modal markup dynamically generated?

Register an event handler on the entire document for the shown.bs.modal event.

$(document).on('shown.bs.modal', '.modal', function () {
    $(this).find('[autofocus]').focus();
});

Autofocus input in twitter bootstrap modal

6 Answers6

Above answers are somewhat outdated for latest Bootstrap versions.

Linked