Twitter bootstrap modal input field focus

Question

I have the following modal form from example:

Answer 1

You can do: e.g

<%= f.text_field :first_name, class: "form-control", placeholder: "Enter first name", autofocus: true%>

just add this: autofocus: true

Answer 2

I think the updated answer is pretty clever. Here is another way to solve it.

Bootstrap 3.2's js file includes a script to manage focus during and after the modal's fade transition. This interferes with any jQuery, javascript or rails+HTML5 focusing on a form field in the modal - bootstrap removes your focus after the modal loads.

To remove bootstrap's ability to override your focus, comment out this line in the Modal script area:

transition ?
    that.$element.find('.modal-dialog') // wait for modal to slide in
      .one($.support.transition.end, function () {
        // that.$element.focus().trigger(e)
        // the line above is stealing your focus after modal loads!
      })
      .emulateTransitionEnd(300) :
    that.$element.focus().trigger(e) 

Now your field should be able to have focus in any modal form.

Answer 3

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