Twitter bootstrap modal input field focus

Question

I have the following modal form from example:

Answer 1

I think the shown event name changed in Bootstrap 3, as explained in this post.

As @MrDBA notes, in Bootstrap 3 the event name is changed to shown.bs.modal.

So, for Bootstrap 3 use:

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus();
})

Answer 2

If you have problems with "shown.bs.modal", just set a timeout.

setTimeout(function() {
$('#myInput').focus();
}, 500);

Answer 3

Just changing $(this).find("[autofocus]:first").focus(); to $(this).find("#myInput").focus(); made it work for me. If you have changed the Bootstrap API and want to undo that change, you can always just re-download and replace the file.

Answer 4

You can also try

$('#the-modal').on('shown.bs.modal', function(e) {
    $('#the-input').focus();
});

Answer 5

Try removing tabindex="-1" and it works nice.

So change this:

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

To this:

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

Answer 6

I removed tabindex="-1" and it works so nice.

My HTML code before changes:

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

My HTML code after changes:

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

My Input code:

<input id="tblModalNombreConductor" type="text" maxlength="50" placeholder="Ej: Armando Casas" autofocus/>

And I have no configurations in my Javascript code.