Question

在我正在工作的网站上，我有一个用户希望在其不同位置（取决于设备）的自定义搜索字段。这是一个WordPress网站，搜索从标题菜单开始。在移动设备上，它被移到标题区域/汉堡菜单上方。他们还规定，应隐藏字段本身，直到单击按钮为止，此时将显示该字段。

在桌面上，在将搜索表单移到DOM之前，一切正常。但是在移动设备上，并且在显示输入字段本身之后，模糊事件会在焦点事件之后大约200毫秒触发。

阅读了以下答案：Input field immediately blurs after focus之后，我的猜测是在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隐藏/取消隐藏它们。我希望有一个比这更优雅的解决方案，并找出导致我的问题开始的原因。

仅专注于移动设备后立即触发输入字段模糊事件

0 个答案: