CODEWITHSUNDEEP
twitter-bootstrap-3angularbootstrap-modal
angel
angel

Reputation: 171

how to auto focus a input in a modal window

i'm using angular2 but this modal I did it with bootstrap3. I have the following input in the modal windows

<img id='searchIcon' src="images/search.png" data-toggle="modal" data-target="#myModal">

<div id="myModal" class="modal fade modal-container" role="dialog">
     <h1>search</h1>
     <input [focus]='true' id='inputSearch' type="text">
</div>

and I would like when I open the modal window to have the input focused (kind of is in pluralsight.com when you click on the magnifier icon).

As you see I tried [focus]='true'but didn't work

Upvotes: 0

Views: 3390

Answers (2)

DarkMatter70
DarkMatter70

Reputation: 1

I believe all you need to do is add autofocus to your input tag like this.

<img id='searchIcon' src="images/search.png" data-toggle="modal" data-target="#myModal">

<div id="myModal" class="modal fade modal-container" role="dialog">
   <h1>search</h1>
   <input id='inputSearch' type="text" autofocus>
</div>

Upvotes: 0

jonju
jonju

Reputation: 2736

This will do 

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

Upvotes: 1

Related Questions