На сайте, над которым я работаю, у меня есть настраиваемое поле поиска, которое пользователь хочет в разных местах в зависимости от устройства. Это сайт WordPress, и поиск начинается в меню заголовка. На мобильном телефоне он перемещается над областью заголовка / меню гамбургера. У них также есть спецификации, согласно которым само поле должно быть скрыто до тех пор, пока не будет нажата кнопка, после чего поле будет отображено.
На рабочем столе, до того, как форма поиска перемещается по DOM, все работает нормально. Но на мобильных устройствах и после отображения самого поля ввода событие размытия срабатывает примерно через 200 мс после события фокусировки.
Прочитав этот ответ: Поле ввода сразу же после фокуса размывается , я предполагаю, что перемещение поискового элемента вокруг DOM вызывает проблему, но я не могу понять, как это исправить, не просто создать два одинаковых поля поиска и скрыть одно в зависимости от ширины экрана. Вопрос / ответ, который я связал, не совсем соответствует моему сценарию, поэтому он не помог мне найти решение.
Вот моя настоящая форма:
<form role="search" method="get" class="search-form" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="search-form-inner">
<input type="search" value="" name="s" id="s" class="search-form-field" placeholder="Search keolisamericas.com">
<input type="submit" id="searchsubmit" class="search-form-submit search-form-toggle" value="">
<span class="search-form-close search-form-toggle"><span class="dashicons dashicons-no-alt"></span></span>
</div>
</form>
А вот код, который перемещает форму:
if (document.documentElement.clientWidth <= 900) {
var $search = $(".genesis-nav-menu .menu-item.search");
$search.detach();
$(".mobile-top-header-nav").prepend($search);
}
Редактировать: Сейчас я просто собираюсь использовать временное решение, состоящее в том, чтобы на странице было две одинаковые формы и скрывать / скрывать их с помощью CSS в зависимости от размера экрана. Мне бы хотелось более элегантное решение, чем это, и выяснить, с чем начинается моя проблема.