Rafael A. M. S. Rafael A. M. S. - 5 months ago 78
Javascript Question

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

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>

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


Look at this bootply


$('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 :