Focus the first field in modal forms

Question

I am using Bootstrap, from Twitter for genereting modal-dialog in a Marionette Application.

I would like to know what is the best way to focus the first field in modal forms without using fancy javascript.

Here my code:

var app = new Marionette.Application();

app.addRegions({
    modal: '#modal'
});

app.vent.on('showModal', function (view) {
    var modal = app.modal;

    modal.show(view);
    modal.$el.modal({
        show: true,
        keyboard: true,
        backdrop: 'static'
    });
});

Possible duplicate of [Twitter bootstrap modal input field focus](http://stackoverflow.com/questions/15474862/twitter-bootstrap-modal-input-field-focus) — Muhammad Rehan Saeed, Oct 13 '15 at 13:46

score 11 · Accepted Answer · answered Jul 26 '12 at 11:49

11

You can use the shown event as seen in the doc

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

answered Jul 26 '12 at 11:49

odupont

1,946
13
16

score 5 · Answer 2 · answered Mar 04 '14 at 13:30

5

If odupont's answer didn't help you,(like me,) try this:

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

answered Mar 04 '14 at 13:30

ParPar

7,355
7
43
56

score 0 · Answer 3 · answered Nov 25 '15 at 16:43

0

Here's an updated answer:

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

answered Nov 25 '15 at 16:43

Expenzor

432
1
5
17

Focus the first field in modal forms

3 Answers3