Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Focus the first field in modal forms

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'
    });
});
like image 568
js999 Avatar asked Jul 26 '12 11:07

js999


People also ask

How do you put focus on a modal?

Answer: Use the jQuery . focus() method focus() method to set the focus on the first input box or textarea inside the Bootstrap modal when it is loaded upon activation.

How do you add focus to an input field?

To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.

How do you form a modal?

After the modal verb, use the word be followed by the –ing form of the main verb. I should be going. You can add a modal verb before a verb in the present perfect continuous tense without changing much. However, when using a modal verb, you must always use “have,” never “had,” even if the subject is third-person.


2 Answers

You can use the shown event as seen in the doc

modal.$el.on('shown', function () {
  $('input:text:visible:first', this).focus();
});
like image 56
odupont Avatar answered Oct 07 '22 10:10

odupont


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

$('.modal').on('shown.bs.modal', function () {
    $('#firstField').focus();
})
like image 5
ParPar Avatar answered Oct 07 '22 12:10

ParPar