[页面加载时自动聚焦的输入字段

Question

好吧，我真的无法弄清楚。加载我的页面之一时，搜索字段将自动聚焦。这打破了页面的标签顺序。在搜索字段之前，有跳过链接和按正确的选项卡顺序排列的其他链接，但是由于某些原因，输入字段始终会获得第一个焦点。取消制表后，制表顺序是正确的，但是在重新制表时会跳过搜索字段，或者在输入字段处开始制表。以下是该元素的摘要：

<input id="search-input" quicksearch="false" type="text" autocomplete="off" name="q" aria-label="Search" value="" placeholder="Search..." tabindex="1">

我在其中手动添加了tabindex =“ 1”进行测试，但仍然无法满足我的需求。它实际上通过在顶部开始制表符来半修复它，但随后不符合制表符的顺序，这就是问题所在。我添加了tabindex =“ 0”，“-1”，“ 2”，但是每一次，输入字段都是首先关注的。我已经使用jQuery从输入字段中删除了自动对焦，并且可以验证它是否已删除了自动对焦，但无济于事。我检查了所有其他元素的选项卡索引，它们的值为“ 0”或“ -1”。

在第一个要关注的输入字段之外，制表符顺序是准确的。我只希望选项卡从页面顶部开始，按逻辑顺序向下工作，并像预期的那样包含输入字段！

是不是jQuery不够快，无法在自动HTML包含在硬HTML中之前就删除自动对焦？

Answer 1

您可以执行blur()使输入控件失去焦点。

function focusInput() {
  document.getElementById('search-input').focus();
}
function blurInput() {
  document.getElementById('search-input').blur();
}

<input type="text" id="search-input" value="Sample">
<br><br>
<button type="button" onclick="focusInput()">Click to gain focus</button>
<button type="button" onclick="blurInput()">Click to lose focus</button>