將焦點設置為選項卡更改時Bootstrap TabContent中的輸入

Question

我需要在選擇tabOne時將焦點設置為“inputOne”輸入，並在選擇tabTwo時將焦點設置為“inputTwo”。

<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

看看這個bootply

JS ：

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

你可以在這里找到doc：

Answer 2

您可以依賴於標簽的bootstrap“顯示”事件來處理：

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

有關選項卡事件的更多信息： http ： //getbootstrap.com/javascript/#tabs

Answer 3

您可以編寫以下jquery代碼：

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

也為tabTwo做同樣的事情。