Question

我正在使用此http://getbootstrap.com/javascript/#tabs在表单中创建标签。
我需要的是将焦点放在显示的第一个input="text"上。

我无法在文档或其他地方找到它。

<div class="tabs">
<ul class="nav nav-tabs">
   <li class="active"><a data-toggle="tab" href="#login1">
      <span class="icon-key"></span>Login</a>
   </li>
   <li class="">
      <a data-toggle="tab" href="#register1"><span class="icon-user"></span>Register
      </a>   
   </li>
</ul>
<div class="tab-content">
   <div id="login1" class="tab-pane active">
      <input type="text"> <!-- focus when tab clicked -->
   </div>
   <div id="register1" class="tab-pane">
      <input type="text"> <!-- focus when tab clicked -->
   </div>
</div>

Answer 1

第一个输入字段不会自动聚焦，您可以执行以下操作：

$('input').first().focus();

这将聚焦输入字段。您甚至可能希望将文档准备好作为启动脚本，如下所示：

$(function() {
    $('input').first().focus();
});

Answer 2

如果你想要手动操作..

$(document).ready(function(){
    $(".tab-pane").on('click', function(){
        $(this).find("input[type=text]").filter(':visible:first').focus();
    });
});

锄头有帮助..

选项卡单击时，twitter bootstrap选项卡设置输入焦点

2 个答案: