在页面加载时专注于搜索

Question

我正在尝试将我网站上的搜索设置为页面加载的默认焦点。 我正在使用的搜索是"搜索和过滤">

我尝试使用自动对焦和对焦，但无法让光标显示在搜索框中。 我的搜索在我的 wooCommerce 商店页面上的小部件中。

Answer 1

如果你使用的是jQuery，你可以使用jQuery焦点函数。

如果在页面加载时未设置焦点，则可能是其他东西在窃取焦点。

function setSearchFocus(){
  console.log('setting search focus');
  $( "#search" ).focus();
}
$( document ).ready(function() {
  setSearchFocus();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="#">
  Search: <input type="text" name="search" id="search"><br/>
</form>
<br/>
<br/>
<button onClick="setSearchFocus()">Click to set focus</button>