加载页面时如何将焦点设置到引导选项卡内容中的输入

Question

在我使用 bootstrap 3.3.6 完成的网站上，我有下图中显示的选项卡。 加载页面时，默认显示第一个选项卡（包含登录表单）。 我想在页面加载时将焦点设置在电子邮件地址的输入字段（下图中的第一个）。 不幸的是，似乎没有考虑以下 jquery 代码：

$(document).ready(function () {
    $("#txtLoginAccountEmail").focus();
});

当必须将焦点设置到选项卡内容内的输入字段时，还有什么需要考虑的吗？ 例如选项卡中的任何事件或其他...

Answer 1

您可以在输入标签中使用autofocus属性。 <input type="email" autofocus>应该可以工作

Answer 2

只需将活动类添加到选项卡的第一个 li

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Login</a></li>
    <li><a href="#">Registration</a></li>
    <li><a href="#">Guest Account</a></li>
</ul>

或者通过 jquery

$(".nav-tabs li:first-child").addclass('active');

Answer 3

如果autofocus不起作用，这是我的方法

  
$(document).on("shown.bs.tab", "button[data-bs-toggle='tab']", function(event) { 
  // event.target // newly activated tab
  // event.relatedTarget // previous active tab
  var activeTab = $('.tab-content .active');
  var focucedInp = $(activeTab).find('input[autofocus="true"]')
  setTimeout(function() { $(focucedInp).focus() }, 200);
});