Set focus to an input within a Bootstrap TabContent on tab change

Question

I need to set focus to "inputOne" input when tabOne is selected, and set focus to "inputTwo" when tabTwo is selected.

<ul class="nav nav-tabs">
     <li class="active"><a href="#tabOne" data-toggle="tab">Tab One</a></li>
     <li class=""><a href="#tabTwo" data-toggle="tab">Tab Two</a></li> 
</ul>

<div id="tabContent" class="tab-content">
     <div class="tab-pane fade" id="tabOne">
           <input type="text" id="inputOne" />
     </div>
     <div class="tab-pane fade" id="tabTwo">
           <input type="text" id="inputTwo" />
     </div>
</div>

Answer 1

Look at this bootply

JS:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var target = e.target.attributes.href.value;
  $(target +' input').focus();
})

You can find doc here :

Answer 2

You can rely on the bootstrap "shown" event for the tabs to handle this:

$(".nav-tabs a").on("shown.bs.tab", function(event) {
    $(event.target.href.value + " input").focus();
});

more info on the tab event: http://getbootstrap.com/javascript/#tabs

Answer 3

You can write the following jquery code :

$( "#tabOne" ).click(function() {
  $( "#inputOne" ).focusin()        
});

Do the same thing for tabTwo also.