搜索按钮显示搜索表单后将焦点移至搜索框

Question

我有一个搜索表单，它会在单击图标时出现。但是焦点仍然在图标上，用户必须在搜索框内再次单击才能键入。如何在表单出现后将焦点转移到输入框？

我的代码是这样的。

图标：

<span class="search-item">
<button aria-expanded="false" class="search-toggle">
<svg class="icon icon-search" aria-hidden="true" role="img" focusable="false">
<use href="#icon-search" xlink:href="#icon-search"></use>
</svg>
<svg class="icon icon-close" aria-hidden="true" role="img" focusable="false">
<use href="#icon-close" xlink:href="#icon-close"></use>
</svg>
</button>
</span>

单击图标时打开的表单：

<form role="search" method="get" class="search-form" itemprop="potentialAction" itemscope="itemscope" itemtype="http://schema.org/SearchAction" action="https://www.example.com/">
<label class="label-search">
<span class="screen-reader-text">SEARCH</span>
<input type="search" class="search-field" itemprop="query-input" placeholder="Search..." value="" name="s" title="Search">
</label>
<button type="submit" class="search-submit">
<svg class="icon icon-search" aria-hidden="true" role="img" focusable="false">
<use href="#icon-search" xlink:href="#icon-search"></use>
</svg>
<span class="screen-reader-text">SEARCH</span>
</button>
</form>

搜索功能 来自 functions.php:

public static function primary_nav_search( $args ) {
    if ( 'primary' !== $args['theme_location'] ) {
        return $args;
    }

    if ( '' === get_theme_mod('manta_nav_search', manta_get_theme_defaults( 'manta_nav_search' ) ) ) {
        return $args;
    }

    $search_toggle = sprintf( '<button aria-expanded="false"%1$s>%2$s%3$s</button>', manta_get_attr( 'search-toggle' ), manta_get_icon( array( 'icon' => 'search' ) ), manta_get_icon( array( 'icon' => 'close' ) ) );
    $search_item   = sprintf( '<span%1$s>%2$s</span>', manta_get_attr( 'search-item' ), $search_toggle );

    $args['items_wrap'] = get_search_form( false ) . $args['items_wrap'] . $search_item;
    return $args;
}

这样可以吗，可以吗？谢谢。

Answer 1

编辑：糟糕，我在这里没有看到 js，但您仍然可以使用 HTML <script> 标签

您应该考虑使用 javascript element.blur() 移除焦点并使用 element.focus() 将焦点设置在另一个元素上。

那里有更多信息：

模糊() - https://www.w3schools.com/jsref/met_html_blur.asp

焦点() - https://www.w3schools.com/jsref/met_html_focus.asp

在您的 HTML 文件中，尝试以下操作：

<script>
    const iconSearch = document.querySelector('.search-toggle');
    const searchField = document.querySelector('.search-field');

    iconSearch.addEventListener("click", function () {
        searchField.focus();
    });
</script>

搜索按钮显示搜索表单后将焦点移至搜索框

Move focus to search box after search button reveals search form

html

focus