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

Click on input field triggers window resize

本文关键字：窗口大小 调整 触发器 字段 输入 单击      更新时间：2023-09-26

我有一个带有徽标，菜单和搜索的标题。当我在桌面上时，我按该顺序显示所有元素，但是如果我的窗口宽度小于 980px，菜单会隐藏（获取一个切换），并且徽标与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正在激活，搜索容器分离并附着在同一空间中。我不知道为什么会这样。当我使用调整大小注释jquery代码的一部分时，我可以毫无问题地输入输入字段。

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

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

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

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

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

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

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

$(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');
      }
   } 
}

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

因此，对

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

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();   
});
<</div> div class="answers">

在iPhone上，如果输入字段的字体大小小于16px，"ios"会自动缩放页面。将输入字段的字体大小设置为 16px 以解决此问题。

相关文章：