如何使tabIndex（输入字段）在页面加载的顶部开始 - Jquery

Posted 2023-02-25

【中文标题】如何使tabIndex（输入字段）在页面加载的顶部开始 - Jquery

【英文标题】：How to make tabIndex(input field) to begin at the top on page load - Jquery

【发布时间】：2020-03-16 17:20:43

【问题描述】：

好吧，我真的想不通。加载我的一个页面时，搜索字段会自动聚焦。这打破了页面的标签顺序。在搜索字段之前有跳过链接和其他以正确的 Tab 键顺序排列的链接，但由于某种原因，输入字段总是首先获得焦点。跳格后，跳格顺序是正确的，但随后在重新跳格时跳过搜索字段或在输入字段处开始跳格。以下是该元素的片段：

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

在最先关注的输入字段之外，Tab 顺序是准确的。我只希望标签从页面顶部开始，并按逻辑方式向下工作，并像应该做的那样包含输入字段！

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

【参考方案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>

【讨论】：

这会使它失去焦点，但不幸的是，它会以标签顺序保留在该位置。