点击输入栏触发器窗口调整大小 [英] Click on input field triggers window resize

问题描述

我有一个包含徽标，菜单和搜索的标题。当我在桌面上时，我已按照该顺序显示所有元素，但是如果我的窗口宽度小于980像素，菜单隐藏（get为切换），并且徽标与 nav 并附在徽标后面。如果宽度较大，徽标会再次分离并附加到DOM中的旧位置。

$（window）.on（'resize '），function（）{if（$（window）.width（）<980）{$（'＃search-container'）。detach（）。insertAfter（'＃logo'）;} else {$（' search-container'）。detach（）。insertAfter（'＃main_menu'）;}}）;

  #logo {display：block; margin：10px auto 15px; text-align：center;}＃search-container {display：inline-block; vertical-align：top; margin-top：8px;背景：#fff; border-radius：5px; padding：1px 10px;}＃search-container .header_search {display：inline-block; line-height：6px;}＃search-container input {border：0; background-color：transparent; font-style：italic;颜色：rgb（114,114,114）;颜色：rgba（114,114,114,0.5）; font-size：14px; line-height：25px; font-weight：400; text-align：left;显示：inline-block; vertical-align：top; width：auto;}＃search-container input：active，＃search-container input：focus {outline：none; border：0;}＃search-container .submit {display：inline-block; margin-left：10px;光标：指针; z-index：10;}＃search-container .submit i {color：＃d3031c; font-size：26px;}  

< link href = https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css =stylesheet/>< script src =https：//ajax.googleapis .com / ajax / libs / jquery / 2.1.0 / jquery.min.js>< / script>< div id =logo>徽标< / div>< div class =menu_wrapper> ; < NAV> < ul id =main_menuclass => <李>菜单1< /锂> <李>菜单2< /锂> <李>菜单3< /锂> < / UL> < div id =search-containerclass =search-box-wrapper hide> < div class =header_search> < form name =searchid =searchmethod =getaction =＃> < input name =stype =textplaceholder =Searchvalue =Search> < a class =submit>< i class =fa fa-search>< / i>< / a> < /形式> < / DIV> < / DIV> < / nav>< / div>

当您点击输入字段输入搜索查询时，会激活移动电话上的反馈（并且仅从Android获得反馈）， resize 被激活，并且搜索容器在同一个空间中分离和附着。我不知道为什么会发生这种情况。当我使用resize对部分jquery代码进行注释时，我可以在输入字段中输入，而不会出现问题。

为什么点击时会触发调整大小？我检查了媒体查询，并且我没有以任何方式扩展元素。

解决方案

我仍然不知道为什么会发生这种情况（调整大小），但我找到了一个解决方案：

我关掉窗口调整 $（'＃search-container'） click event：

  $（'＃search-container'）。on（'click'，function （）{
 $（window）.off（'resize'）; 
}）; 
  

停止调整窗口大小（导致问题），并且您可以轻松地在android上键入现在：）

I have a header with logo, menu and search. When I'm on desktop I have all elements shown in that order, but if my window width is less than 980px, the menu hides (get's a toggle), and the logo is detached from the nav and attached after the logo. If the width is greater the logo is again detached and attached to the old place in the DOM.

    $(window).on('resize', function() {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
    });

#logo {
  display: block;
  margin: 10px auto 15px;
  text-align: center;
}
#search-container {
  display: inline-block;
  vertical-align: top;
  margin-top: 8px;
  background: #fff;
  border-radius: 5px;
  padding: 1px 10px;
}
#search-container .header_search {
  display: inline-block;
  line-height: 6px;
}
#search-container input {
  border: 0;
  background-color: transparent;
  font-style: italic;
  color: rgb(114, 114, 114);
  color: rgba(114, 114, 114, 0.5);
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: auto;
}
#search-container input:active,
#search-container input:focus {
  outline: none;
  border: 0;
}
#search-container .submit {
  display: inline-block;
  margin-left: 10px;
  cursor: pointer;
  z-index: 10;
}
#search-container .submit i {
  color: #d3031c;
  font-size: 26px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="logo">Logo</div>

<div class="menu_wrapper">
  <nav>
    <ul id="main_menu" class="">
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
    </ul>
    <div id="search-container" class="search-box-wrapper hide">
      <div class="header_search">
        <form name="search" id="search" method="get" action="#">
          <input name="s" type="text" placeholder="Search" value="Search">
          <a class="submit"><i class="fa fa-search"></i></a>
        </form>
      </div>
    </div>
  </nav>
</div>

Now the issue happens on mobile phones (and from the feedback, only on Android), when you tap on the input field to enter the search query, resize is being activated, and the search container detaches and attaches itself in the same space. And I have no idea why this happens. When I comment the part of the jquery code with the resize, I can type in the input field without the problem.

Why is resize being triggered on click? I checked the media queries, and I am not expanding the element in any way.

解决方案

I still have no idea why this happens (the resize), but I found a solution:

I am turning off the window resize on $('#search-container') click event:

$('#search-container').on('click', function(){
    $(window).off('resize');
});

Stops the window from resizing (which was causing the issue), and you can type on android with ease now :)

这篇关于点击输入栏触发器窗口调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！