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>

Solution 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 :

Solution 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

Solution 3

You can write the following jquery code :

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

Do the same thing for tabTwo also.

Comments

[Rafael A. M. S.]

Hi, thanks for your answer but its not working... Should i put an ID on the tab header and check its click event instead of tabContent div ID?

[stacky]

$(document).ready(function(). have you wrote the function inside this

[Rafael A. M. S.]

Ive changed (target +' input') to ('#inputTwo') and it worked! Thanks!

[BENARD Patrick]

bootply.com/d4A1aywY3w : On tab One, input one is focused, same for #2...

[Rafael A. M. S.]

And if i have several inputs on each tab, and want to select a specific one on each tab?

[nthall]

In that circumstance I'd probably add an attribute to the tab links like data-focus="#inputTwo", then grab that in the function as the target to select: target = $(e.target).attr('data-focus'); $(target).focus();

[Vnge]

Thanks! I was trying to use the show event in addition to my current code

[Igor Monteiro]

simple and helpful..tks

[Naomi]

I am using angularJs (version 1.5+). I have the focus directive, how can I incorporate your suggestion into it? My markup is <ul class="nav nav-pills"><li class="active"><a data-toggle="pill" href="#paymentTypes" ng-class="{true: 'invalid-tab', false: ''}[form.EditPaymentTypeForm.$invalid]">General</a></li> <li><a data-toggle="pill" href="#paymentInfo" ng-class="{true: 'invalid-tab', false: ''}[form.PaymentInformationForm.$invalid]">Information</a></‌​li> </ul> I want the first input in each tab to be focused when activated