Focus input on modal show

Question

How can I auto focus an input on modal show? Currently I do this but it isn't working:

jQuery(document).ready(function($) {
    $('#myModal').on('show.bs.modal', function() {
        $('input[name="myInput"]').focus();
    });
});

http://jsfiddle.net/1aeur58f/2513/

Possible duplicate of [How to Set focus to first text input in a bootstrap modal after shown](https://stackoverflow.com/questions/15247849/how-to-set-focus-to-first-text-input-in-a-bootstrap-modal-after-shown) — 31piy, Apr 05 '18 at 07:20

score 7 · Accepted Answer · answered Apr 05 '18 at 07:47

7

Your code is basically correct. But the event show.bs.modal is triggerede before the modal has been shown. You need to use shown.bs.modal event instead.

jQuery(function($) {
    $('#myModal').on('shown.bs.modal', function() {
        $('input[name="myInput"]').focus();
    });
});

http://jsfiddle.net/1aeur58f/2544/

answered Apr 05 '18 at 07:47

eisbehr

12,243
7
38
63

`$('input[name="myInput"]').focus();` did not work for me, but `$('#myInput').focus();` did work - thanks! (Bootstrap 4) – cloudxix Jun 14 '22 at 05:01

score 0 · Answer 2 · answered Apr 05 '18 at 07:42

0

In Your code, Use autofocus

<input name="myInput" value="MyVal" type="text" autofocus/>

answered Apr 05 '18 at 07:42

Sudarshan

367
2
8
20

Focus input on modal show

2 Answers2