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?

Answer 1

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();
});

Answer 2

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();
});

Answer 3

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!

Answer 4

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()
})

Answer 5

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()
})