单击输入字段触发窗口调整大小

Question

我有一个带有徽标、菜单和搜索的标题。当我在桌面上时，所有元素都按该顺序显示，但如果我的窗口宽度小于 980 像素，则菜单会隐藏（获取一个切换按钮），并且徽标与 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;
  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>

现在问题发生在手机上（根据反馈，仅在 Android 上），当您点击输入字段以输入搜索查询时，resize 被激活，搜索容器分离并附加到同一个空间。我不知道为什么会这样。当我用resize注释jquery代码的一部分时，我可以在输入字段中输入而没有问题。

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

Answer 1

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

我正在关闭$('#search-container')点击事件的窗口调整大小：

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

停止调整窗口大小（这是导致问题的原因），您现在可以轻松地在 android 上键入 :)

Answer 2

发生这种情况是因为单击输入元素时会打开软键盘。显然resize 会触发大量事件，如下所述：https://www.quirksmode.org/dom/events/resize_mobile.html。

您的解决方案有效，但您也可以使用this approach，即

$(window).on('resize', function(){
   // If the current active element is a text input, we can assume the soft keyboard is visible.
   if( $(document.activeElement).prop('type') !== 'text') {
      if ($(window).width() < 980) {
        $('#search-container').detach().insertAfter('#logo');
      } else {
        $('#search-container').detach().insertAfter('#main_menu');
      }
   } 
}

Answer 3

我花了一段时间才意识到移动键盘正在触发调整大小事件。我只是通过注释掉调整大小功能才发现的。我在页面上有两个搜索输入，有趣的是，这个问题只发生在一个输入上，即我在调整大小时进入侧边菜单的那个。

所以对我有用的是创建一个全局布尔值，如果我的输入被点击，它将是真实的。然后在我的调整大小函数中，我检查我的布尔值是否为真，如果是，我强制聚焦输入，如果不是，则执行调整大小逻辑。

var isClicked = false;    
function resize(){  
  if(isClicked){
      $('#search-input').focus().select();      
  }else{
    //resize logic
  } 
}
document.addEventListener("DOMContentLoaded", function(event) { 
    $('#search-input').click(function(){
        isClicked = true;
    }); 
    resize();   
});

Answer 4

在 iphone 上，如果 input-field 的 font-size 小于 16px，'ios' 会自动缩放页面。设置 input-field 的 font-size 为 16px 来解决这个问题。