title: Twitter bootstrap modal input field focus
body: <p>I have the following modal form from example:</p>
  
  <pre><code>&lt;!-- Button to trigger modal --&gt;
  &lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
      &lt;h3 id="myModalLabel"&gt;Modal header&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      Enter something: &lt;input type="text" id="myInput"&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;button class="btn btn-primary"&gt;Save changes&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want my input field to be focused after modal is shown.<br>
  I've tryed both autofocus and setting field focus on <code>$('modal').shown()</code> event. It kinda focuses field (I have another event which shows label when field is focused) but in fact field is not focused and I have to press <code>TAB</code> to focus it again. 
  I also tried something like this:</p>
  
  <pre><code>$(".modal").on('shown', function() {
      $(this).find("[autofocus]:first").focus();
  });
  </code></pre>
  
  <p>and setting <code>autofocus:"autofocus"</code> attribute for my field.
  It gave same effect.<br>
  Everything I tried works for when modal is just a usual div, it gets focus on page load. But when modal is triggered by button - nothing works (sure I change logic also, when modal is just a usual div I can focus it onload, when I trigger by button I take it into account and try to solve it accordingly).   </p>
  
  <p>What I want is just field to be focused after modal is loaded, so that it has blinking cursor and user can just start typing.   </p>
  
  <p>Only thing that worked is changing bootstrap.js itself, I've put <code>$("#myInput").focus()</code> somewhere inside bootstrap.js modal section but well I forgot where it was, and second - I think it's not good to change bootstrap.js API, there must be easier and more elegant solution. Advice me please, thanks xD</p>
  
  <p><strong>UPDATE:</strong><br>
  First of all, thanks for your help!
  Thanks to you I figured out that problem I had is Rails problem.   </p>
  
  <p>Here is what I did:<br>
  1). <code>rails generate controller home index</code><br>
  2). <em>app/views/home/index.html</em> and <em>app/assets/javascript/something.js</em> are like in this jsFiddle provided by <strong>robertklep</strong>: <a href="http://jsfiddle.net/JCaFp/">http://jsfiddle.net/JCaFp/</a><br>
  4). <em>jquery-1.9.1.js</em> and <em>bootstrap.js</em> are in <em>app/assets/javascript/</em> (both are fresh from website, nothing changed)<br>
  5). <em>app/views/layouts/application.html.erb</em> - I guess this file is the key of our solution:    </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Udc&lt;/title&gt;
    &lt;%= stylesheet_link_tag    "application", :media =&gt; "all" %&gt;
    &lt;%= javascript_include_tag "application" %&gt;
    &lt;%= csrf_meta_tags %&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;%= yield %&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Still doesn't work. All js files get included, but when I open my modal in browser - input get focus for a moment and gets unfocused again.   </p>
  
  <p>I've also tried this:</p>
  
  <pre><code>  &lt;%= javascript_include_tag "jquery" %&gt;
    &lt;%= javascript_include_tag "bootstrap" %&gt;
    &lt;%= javascript_include_tag "somehow" %&gt;
  </code></pre>
  
  <p>Still same stuff.<br>
  Suggestions? :) </p>
  
  <p><strong>UPDATE:</strong>   </p>
  
  <p><strong>Solved it!</strong></p>
  
  <p>After changing my <code>somehow.js</code> to </p>
  
  <pre><code>$(document).ready(function() {
      $(".modal").on('shown', function() {
          $(this).find("[autofocus]:first").focus();
      });
  });
  </code></pre>
  
  <p>and <code>application.html.erb</code> stylesheet to:     </p>
  
  <pre><code>  &lt;%= javascript_include_tag "jquery" %&gt;
    &lt;%= javascript_include_tag "bootstrap" %&gt;
    &lt;%= javascript_include_tag "somehow" %&gt;
  </code></pre>
  
  <p>it works as expected. Thanks again!</p>