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

User · Answer

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

User · Answer

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

User · Answer

First step  you have to set your autofocus attribute on form input    lt input name  full name  autofocus  gt     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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

I found the best way to do this  without jQuery     lt input value    autofocus gt    works perfectly   This is a html5 attribute  Supported by all major browsers  https   developer mozilla org en-US docs Web HTML Element Input

User · Answer

Use the autofocus to search for the right form element      modal   on  shown bs modal   function         this  find   autofocus    focus

User · Answer

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

User · Answer

try this code  it might work for you    this  find  input text   0  focus

User · Answer

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

User · Answer

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

User · Answer

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         lt button     data-target   myModal1  gt       lt  button gt         lt  -- Modal 1 -- gt   lt div class  modal fade  id  myModal1      gt         lt div class  modal-body  gt   lt textarea id  textareaID1      gt  lt  textarea gt  lt  div gt    JS      myModal1   on  shown bs modal   function           textareaID1   focus

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

Examples related to jquery

Examples related to twitter-bootstrap