Переместить фокус на поле поиска после того, как кнопка поиска откроет форму поиска

У меня есть форма поиска, которая появляется при нажатии на значок. Но фокус остается на значке, и пользователю нужно снова щелкнуть внутри окна поиска, чтобы ввести текст. Как сместить фокус на поле ввода после появления формы?

Мой код выглядит так.

ЗНАЧОК:

<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;
}

Можно ли это сделать, возможно ли? Спасибо.

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
1 469
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Редактировать: упс, я не вижу здесь js, но вы все равно можете использовать тег HTML <script>

Вам следует рассмотреть возможность использования JavaScriptelement.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>

Спасибо за ваш вклад. Я исследовал это перед публикацией, но я новичок. Дело в том, что я не могу заставить его работать. Я попытался установить фокус через getElementById, но это не сработало. Я думаю, это может быть потому, что кнопка также показывает/скрывает поле ввода?

Alex 13.07.2019 23:40

Вы использовали getElementById, но у вас нет идентификатора. Вы пытались указать идентификатор для ввода? В противном случае, если у вас есть только 1 такой вход, вы можете попытаться найти элемент с помощью querySelector и использовать класс, я обновлю свой ответ, чтобы дать вам код для добавления в ваш тег <script>!

ka_raph 13.07.2019 23:54

Да, тем временем я внес некоторые изменения в код и не обновлял его здесь. Я видел другие примеры, когда к кнопке добавляли функцию (onclick), и эта функция использовала getElementById, но у меня это не сработало. Если бы вы были так любезны обновить свой ответ кодом, я был бы очень благодарен!

Alex 14.07.2019 00:01

Я обновил свой ответ, document.querySelector('') работает с селекторами CSS, если вам нужно указать идентификатор для вашего значка/ввода (если у вас их несколько), просто поместите их селектор CSS вместо .элемент поиска и .поле поиска в моем коде

ka_raph 14.07.2019 00:09

Вы поставили тег srip в конце документа перед тегом </body>? Селектор javascript не может работать, если не может найти элемент до написано, по вашей ссылке в консоли я вижу, что селектор стоит null, когда я открываю страницу, а в отладчике похоже, что вы положили весь код слишком рано! В противном случае мне немного не хватает решений, которых я боюсь, может быть, в вашем коде есть что-то, что удерживает внимание на значке.

ka_raph 14.07.2019 00:27

Прошу прощения за эту ошибку новичка еще раз. Я переместил его в конец тела, но он все еще не работает. Может конфликт с чем-то другим? Мне просто интересно.

Alex 14.07.2019 00:31

Да, я думаю, что есть что-то, что удерживает фокус на значке (или, по крайней мере, удерживает фокус за пределами текстовой области, у меня была проблема с маршрутизатором в моем приложении, который удерживал фокус на ссылке, и я мог видеть, как "слабый" этот метод...

ka_raph 14.07.2019 00:34

Ну, я хочу поблагодарить вас за то, что нашли время, чтобы объяснить мне кое-что. Думаю, тогда мне нужно копнуть глубже и лучше понять код.

Alex 14.07.2019 00:39

Ничего себе, я сделал небольшое изменение, и это сработало! Я выбрал сам значок (переключатель поиска) вместо диапазона перед ним (элемент поиска). И теперь это работает! Большое спасибо за Вашу помощь. Если вы обновите свой ответ (измените селектор css только с элемента поиска на переключатель поиска), я смогу принять решение!

Alex 14.07.2019 00:43

На этот раз это моя ошибка, я должен был выбрать изображение напрямую, ошибка новичка ...... ну, тогда я редактирую свой ответ, пожалуйста!

ka_raph 14.07.2019 00:45

Нет проблем, мы хорошая команда :)) Я благодарен за ваши усилия и за то, что нашли время, чтобы объяснить мне вещи!

Alex 14.07.2019 00:48

Другие вопросы по теме