javascript - jQuery .focus() 在搜索字段的 Safari(桌面)中不起作用

Question

我有一个隐藏的搜索字段，当用户点击搜索图标时，它会打开，我想立即将焦点放在搜索输入上，这样用户就不必点击两次。它在 Chrome 中完美运行，但在 Safari(桌面)中运行不佳。我看到了一些其他建议，将其包装在超时中会起作用，但仍然没有骰子。有什么想法吗？

jQuery:

$search       = $('.header--search-container');
$searchInput  = $('.header--search-input input[type=search]');

  $search.click(function(){
    $searchInput.toggleClass('search-active');
    setTimeout(function(){
      $('header .header--search-input .search-field').focus();
    }, 1);
  });

HTML(并不是真的认为它是必需的，只是为了让您可以看到...还编辑了 <header> 元素):

<div class="header--search-input">
      <form role="search" method="get" class="search-form" action="http://example.com/">
       <label>
         <span class="screen-reader-text">Search for:</span>
         <input type="search" class="search-field" placeholder="Search &hellip;" value="" name="s" />
        </label>
        <input type="submit" class="search-submit" value="Search" />
       </form>        
 </div>
        <div class="header--search-container">
          <svg> 
           .. redacted for legibility on stack overflow ..
          </svg>

        </div>

Answer 1

添加更高的 setTimeout 值有效。

  $search.click(function(){
    $searchInput.toggleClass('search-active');
    setTimeout(function(){
      $('header .header--search-input .search-field').focus();
    }, 500);
  });