autofocus on input in bootstrap modal

Question

I'm using bootstrap 3 to create a modal box. I want to have it autofocus on the input area. I tried with jQuery, but I don't know, what is the problem?

JavaScript:

$('#click').click(function () {
    $('input').focus()
});

Here is a demo on JSFiddle

score 3 · Answer 1 · answered Jul 09 '15 at 13:57

3

This may be hard code but add a Timeout function to focus it.
The fact is the modal isn't here yet so the browser can't focus an element in it.

$('#click').click(function() {
  setTimeout(function(){
    $('input').focus() 
  },500);
});

answered Jul 09 '15 at 13:57

tektiv

14,010
5
61
70

Thnx tektiv, but i think Erik solution it better :) – elreeda Jul 09 '15 at 17:34
yup, the "shown.bs.modal" event fires "after the modal has been made visible to the user" – Brad Kent Apr 10 '17 at 16:51

Erik Inkapööl · Accepted Answer · 2015-07-09T14:04:06.737

2

I've updated your JSFiddle. When using the bootstrap modal window there are a number of custom events you can use. one of those is shown.bs.modal wich runs after a modal is fully shown (and your input field is focusable). Remember that the event will be triggered on the modal, not on whatever opened the modal.

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

edited Jul 09 '15 at 14:04

answered Jul 09 '15 at 13:59

Erik Inkapööl

378
2
11

If my answer solved your problem, please accept it :) – Erik Inkapööl Jul 09 '15 at 14:07
[with any luck this will be automatic in bootstrap 4](https://github.com/twbs/bootstrap/issues/22402) – Brad Kent Apr 10 '17 at 16:52

score 0 · Answer 3 · answered Dec 30 '22 at 11:24

I am also use this code

<script>
    function setFocusOnModal(){
        $('#searchModal').on('shown.bs.modal', function () {
            $('#q').focus();
        });
    }
</script>

Where #searchModal is modal div ID and #q is input element ID

Use this code in button

<button type="button" onclick="setFocusOnModal()">Open Modal</button>

autofocus on input in bootstrap modal

3 Answers3