0

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

angel
  • 171
  • 2
  • 4
  • 12

2 Answers2

1

This will do 

$('#myModal').on('shown.bs.modal', function() {
    $("#inputSearch").focus();
});
jonju
  • 2,711
  • 1
  • 13
  • 19
  • how do I do that on angular2? because I can't use jquery in angular 2 – angel Aug 01 '16 at 22:24
  • 1
    You can use it by import jquery library in your index.html. Be aware that if you start using it everywhere instead of angular 2 approach... well... you will have spaguetti for breakfast, lunch and dinner. – kitimenpolku Jan 31 '17 at 10:50
0

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>
DarkMatter70
  • 1
  • 1
  • 2
  • 3
    this works, but if a close the modal and open again and it doesn't work :S, and it doesn't work on firefox – angel Aug 01 '16 at 23:42
  • @angel I found [this answer](http://stackoverflow.com/a/34573219/2318578), it looks like it might solve a similar problem, specifically the updated section of Eric's answer. It seems odd that there's not a simpler way to deal with focus... – DarkMatter70 Aug 02 '16 at 04:22