Set focus to control after show modal

I need to set focus on a control inside the modal after the show modal event.

Here's the code I have so far:

$('#searcherCustomerModal').on('shown', function () {
    $("#txtNameCustomer").select();
});

But it does not work. Any Ideas?

Answer

February 24, 2015

KyleMit

In jQuery, you set focus with .focus() not .select()
Also, in Bootstrap 3, the shown event is called shown.bs.modal

So the code should look like this:

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

Demo in Stack Snippets:

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

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#searcherCustomerModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="searcherCustomerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      
      <div class="modal-body">
        <input type="text" id="txtNameCustomer" class="form-control" />
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>