У меня есть форма поиска, которая появляется при нажатии на значок. Но фокус остается на значке, и пользователю нужно снова щелкнуть внутри окна поиска, чтобы ввести текст. Как сместить фокус на поле ввода после появления формы?
Мой код выглядит так.
ЗНАЧОК:
<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;
}
Можно ли это сделать, возможно ли? Спасибо.
Редактировать: упс, я не вижу здесь 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, но у вас нет идентификатора. Вы пытались указать идентификатор для ввода? В противном случае, если у вас есть только 1 такой вход, вы можете попытаться найти элемент с помощью querySelector
и использовать класс, я обновлю свой ответ, чтобы дать вам код для добавления в ваш тег <script>
!
Да, тем временем я внес некоторые изменения в код и не обновлял его здесь. Я видел другие примеры, когда к кнопке добавляли функцию (onclick), и эта функция использовала getElementById, но у меня это не сработало. Если бы вы были так любезны обновить свой ответ кодом, я был бы очень благодарен!
Я обновил свой ответ, document.querySelector('')
работает с селекторами CSS, если вам нужно указать идентификатор для вашего значка/ввода (если у вас их несколько), просто поместите их селектор CSS вместо .элемент поиска и .поле поиска в моем коде
Вы поставили тег srip в конце документа перед тегом </body>
? Селектор javascript не может работать, если не может найти элемент до написано, по вашей ссылке в консоли я вижу, что селектор стоит null
, когда я открываю страницу, а в отладчике похоже, что вы положили весь код слишком рано! В противном случае мне немного не хватает решений, которых я боюсь, может быть, в вашем коде есть что-то, что удерживает внимание на значке.
Прошу прощения за эту ошибку новичка еще раз. Я переместил его в конец тела, но он все еще не работает. Может конфликт с чем-то другим? Мне просто интересно.
Да, я думаю, что есть что-то, что удерживает фокус на значке (или, по крайней мере, удерживает фокус за пределами текстовой области, у меня была проблема с маршрутизатором в моем приложении, который удерживал фокус на ссылке, и я мог видеть, как "слабый" этот метод...
Ну, я хочу поблагодарить вас за то, что нашли время, чтобы объяснить мне кое-что. Думаю, тогда мне нужно копнуть глубже и лучше понять код.
Ничего себе, я сделал небольшое изменение, и это сработало! Я выбрал сам значок (переключатель поиска) вместо диапазона перед ним (элемент поиска). И теперь это работает! Большое спасибо за Вашу помощь. Если вы обновите свой ответ (измените селектор css только с элемента поиска на переключатель поиска), я смогу принять решение!
На этот раз это моя ошибка, я должен был выбрать изображение напрямую, ошибка новичка ...... ну, тогда я редактирую свой ответ, пожалуйста!
Нет проблем, мы хорошая команда :)) Я благодарен за ваши усилия и за то, что нашли время, чтобы объяснить мне вещи!
Спасибо за ваш вклад. Я исследовал это перед публикацией, но я новичок. Дело в том, что я не могу заставить его работать. Я попытался установить фокус через getElementById, но это не сработало. Я думаю, это может быть потому, что кнопка также показывает/скрывает поле ввода?