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

Question

on my website done with bootstrap 3.3.6 i have the tabs shown in the image below. when the page is loaded, the first tab (containing a login-form) is shown by default. i'd like to set the focus in the input field for the e-mail address (the first one in the image below) when the page is loaded. unfortunately, the following jquery-code seems not to be considered:

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

is there anything else to consider when the focus must be set to an input field which is inside of a tab content? eg any events from the tab or else...

Answer 1

You could use the autofocus attribute in the input tag. <input type="email" autofocus> should work

Answer 2

Simply add active class to first li of tabs

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

Or by jquery

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

Answer 3

This is my method if autofocus doesn't work

  
$(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);
});