How to Set focus to first text input in a bootstrap modal after shown

Question

I load a dynamic bootstrap modal and it contains few text inputs. The issue i face that i want the cursor to focus on the first input in this modal, and this is not happening by default.
So i wrote this code to do it:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

But now it focus on the in the input for a moment then go away automatically, why this is happening and how to solve?

Try setting a timeout for it, something else might be interfering. `setTimeout(function() { /* Your code */ }, 100);` — qwerty, Mar 06 '13 at 12:59
can you try this for me... var index = 0; $('#modalContainer').on('show', function () { index = 1; }); if(index){ $('input:text:visible:first').focus(); } — chirag ghiyad, Mar 06 '13 at 13:03
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:48

score 227 · Accepted Answer · edited May 23 '17 at 12:10

@scumah has the answer for you: Twitter bootstrap - Focus on textarea inside a modal on click

For Bootstrap 2

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

Update: For Bootstrap 3

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

========== Update ======

In response to a question, you can use this with multiple modals on the same page if you specify different data-targets, rename your modals IDs to match and update the IDs of the form input fields, and finally update your JS to match these new IDs:
see http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

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

This gives maximum callstack error when jquery validation fires!. Hence this is of no use to me. — Vandita, Apr 03 '19 at 08:28
@Vandita, if you want to start a pen on codepen.io that illustrates the problem you describe I'd be happy to look at it for you. — David Taiaroa, Apr 03 '19 at 22:53

tmarois · Answer 2 · 2014-06-28T02:12:19.470

89

I found the best way to do this, without jQuery.

<input value="" autofocus>

works perfectly.

This is a html5 attribute. Supported by all major browsers.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

edited Jun 28 '14 at 02:12

answered Dec 12 '13 at 17:53

tmarois

2,424
2
31
43

After spending a couple hours trying to get this work how it should (click or on handlers) I found only one method that works which is the html5 autofocus attribute: `` – lots0logs Jun 27 '14 at 10:38
2

Here is how you can do it on an MVC3 control: `@Html.TextBoxFor(m => m.UserName, new { @autofocus="" })` – Flea Apr 07 '15 at 14:48
26

It hasn't worked for me... after showing bootstrap modal the input loses the focus – Diego Cotini Dec 08 '15 at 22:34
I too see the input gain focus for a moment after the bootstrap modal appears when using autofocus. However, the input then loses focus. Had to implement the .on() handler. – raddevus Dec 16 '16 at 03:43
9

This works if you remove `tabdindex="-1"` from your modal, however it only works once. Closing and re-opening doesn't focus. – Memet Olsen May 03 '17 at 12:20
It will not work in dynamic modals, but the accepted answer works well – M.J.Ahmadi Apr 25 '21 at 08:59
2

In bootstrap modal documentation, this is not supported for modal but it can be used for other forms. Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript: $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) – Sabaoon Bedar Jun 02 '21 at 03:55
autofocus works, but not in Bootstrap Modals.. – Reichlich Aug 09 '22 at 15:42

score 68 · Answer 3 · edited Nov 20 '15 at 19:12

68

The answer of David Taiaroa is correct, but doesn’t work because the time to "fade in" the modal doesn’t let you set focus on input. You need to create a delay:

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

})

edited Nov 20 '15 at 19:12

Nate

18,752
8
48
54

answered Dec 26 '14 at 08:47

Marcos Furquim

990
8
12

2

You are the only right here. Your solution is the only one that works. I tried to set a smaller value for timeOut but didn't work. Seems modal "finishes loading" at 1000ms :( – Enrique Jun 19 '15 at 15:42
3

The correct is to use the shown.bs.modal event: http://getbootstrap.com/javascript/#modals-events – Akhorus Sep 07 '15 at 21:43
3

Instead of using setTimeout(), you can use delay() like following... $('#textareaID').delay(1000).focus().select(); – Tony May 19 '16 at 22:07

score 29 · Answer 4 · edited Dec 22 '20 at 20:30

29

The usual code (below) does not work for me:

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

I found the solution:

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

edited Dec 22 '20 at 20:30

But those new buttons though..

21,377
10
81
108

answered Dec 10 '15 at 13:44

Éderson T. Szlachta

488
6
6

Sounds like a problem with your selector - not the method. – But those new buttons though.. Dec 22 '20 at 20:30

score 11 · Answer 5 · answered Mar 31 '15 at 14:33

I got that bootstrap added the following info on their page:

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

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

http://getbootstrap.com/javascript/#modals

score 9 · Answer 6 · answered Jun 04 '16 at 20:43

9

This is the simple code that will work for you best on all popups that has any input field with focusing it

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

answered Jun 04 '16 at 20:43

Junaid Anwar

844
1
9
22

score 4 · Answer 7 · answered Jan 24 '17 at 16:05

4

I think the most correct answer, assuming the use of jQuery, is a consolidation of aspects of all the answers in this page, plus the use of the event that Bootstrap passes:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

It also would work changing $(document) to $('.modal') or to add a class to the modal that signals that this focus should occur, like $('.modal.focus-on-first-input')

answered Jan 24 '17 at 16:05

Phil Hodgson

73
7

If you also want it to ignore readonly textboxes, modify the line to read: $('input:visible:enabled:not([readonly]):first', e.target).focus(); – Douglas Timms May 16 '19 at 14:57

score 4 · Answer 8 · answered Nov 02 '17 at 04:22

4

First step, you have to set your autofocus attribute on form input.

<input name="full_name" autofocus/>

And then you have to add declaration to set autofocus of your input after your modal is shown.
Try this code :

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

answered Nov 02 '17 at 04:22

Fendi Septiawan

453
5
6

i used $(this).find('[autofocus]').focus(); and it works – SummerRain May 29 '19 at 08:51

score 3 · Answer 9 · answered Mar 06 '13 at 13:12

3

try this code, it might work for you

$(this).find('input:text')[0].focus();

answered Mar 06 '13 at 13:12

Jitesh Tukadiya

1,269
1
11
25

1

Here's what I use : `$(this).find('input:text').first().focus()` – Jimmy Jun 06 '16 at 22:29

score 3 · Answer 10 · answered Mar 10 '21 at 09:00

3

With Bootstrap 4: 1/ Remove "fade" class at <div class="modal fade"... 2/ Next (https://getbootstrap.com/docs/4.6/components/modal/)

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

If you are not remove "fade" class, the input will focus, but keyboard will not show in Safari on iOS

answered Mar 10 '21 at 09:00

vlotus

31
1

Removing the fade class from the modal div is also the solution for Bootstrap 5. – Herbert Van-Vliet Jan 23 '22 at 22:37
I tried but not working – Reichlich Aug 09 '22 at 15:54

Hassan ALAMI · Answer 11 · 2019-02-26T15:53:19.100

if you're looking for a snippet that would work for all your modals, and search automatically for the 1st input text in the opened one, you should use this:

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

If your modal is loaded using ajax, use this instead:

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

score 1 · Answer 12 · answered Jul 15 '20 at 00:57

1

Use the autofocus to search for the right form element:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

answered Jul 15 '20 at 00:57

gal007

6,911
8
47
70

score 0 · Answer 13 · answered Apr 20 '16 at 12:12

0

If you want to just auto focus any modal that was open you can put in you patterns or lib functions this snippet that will focus on the first input:

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

answered Apr 20 '16 at 12:12

Gabriel Rodrigues

510
1
8
29

score 0 · Answer 14 · answered Sep 11 '19 at 09:04

this is the most general solution

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

works with modals added to DOM after page load
works with input, textarea, select and not with button
ommits hidden, disabled, readonly
works with faded modals, no need for setInterval

score 0 · Answer 15 · answered Nov 20 '19 at 07:04

Try to remove the tabIndex property of the modal, when your input/textbox is open. Set it back to what ever it was, when you close input/textbox. This would resolve the issue irrespective bootstrap version, and without compromising the user experience flow.

score 0 · Answer 16 · answered Feb 29 '20 at 23:15

According to Bootstrap 4 docs:

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript.

E.g:

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

Link.

score 0 · Answer 17 · answered Apr 06 '23 at 00:01

If you prefer to do it with pure javascript, this below will show the modal and also select the first input field:

export function showModalById(elementId) {
    var element = document.getElementById(elementId)

    var input = element.querySelector('input')
    element.addEventListener('shown.bs.modal', function (event) {
        input.focus()
    })

    var modal = bootstrap.Modal.getOrCreateInstance(element)
    modal.show()
}

score 0 · Answer 18 · answered Jun 07 '23 at 14:38

For Bootstrap 5, use addEventListener. This was the only way I could get it to work.

var myModal = document.getElementById('whiteModal')

myModal.addEventListener('shown.bs.modal', function () {
  document.getElementById('my-input').focus()
})

For more info, see getbootstrap.com/docs/5.0/components/modal/.

How to Set focus to first text input in a bootstrap modal after shown

18 Answers18

Linked