Twitter bootstrap modal input field focus

javascript jquery ruby-on-rails twitter-bootstrap

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

javascript jquery ruby-on-rails twitter-bootstrap

For a general solution that doesn't require specific code for each dialog, you can use this:

$('.modal').on('shown.bs.modal', function () {  $(this).find('input:text:visible:first').focus();})

javascript jquery ruby-on-rails twitter-bootstrap

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">

CodeHunter