Autofocus input in twitter bootstrap modal

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?

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

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!

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

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

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.

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