当切换Bootstrap选项卡时，将焦点设置到输入框中。

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>

- Rafael A. M. S.

Answer 1

看看这个bootply

JS：

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

您可以在这里找到文档：

- BENARD Patrick

---

我已经将（target + ' input'）更改为（'#inputTwo'），它可以工作了！谢谢！ - Rafael A. M. S.

在选项卡一上，输入1被聚焦，#2也是如此... - BENARD Patrick

如果每个选项卡上有多个输入，并且想要在每个选项卡上选择特定的一个，该怎么办？ - Rafael A. M. S.

在这种情况下，我可能会向选项卡链接添加一个属性，例如 data-focus="#inputTwo"，然后在函数中获取它作为选择目标：target = $(e.target).attr('data-focus'); $(target).focus(); - nthall

谢谢！我正在尝试在我的当前代码中使用show事件。 - Vnge

Answer 2

您可以依靠Bootstrap中tab的“shown”事件来处理此问题：

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

更多有关选项卡事件的信息：http://getbootstrap.com/javascript/#tabs

- nthall

Answer 3

你可以编写以下 jQuery 代码：

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

同样的事情也要对tabTwo做。

- stacky

---

嗨，谢谢你的回答，但它没有起作用...我应该在选项卡标题上放置一个ID并检查其点击事件，而不是tabContent div ID吗？ - Rafael A. M. S.

$(document).ready(function()。你是否已经在其中编写了函数？ - stacky