Question

我有标题，菜单和搜索标题。当我在桌面上时，我按顺序显示了所有元素，但是如果我的窗口宽度小于980px，则菜单会隐藏（进行切换），徽标与{{1}分离并附在徽标后面。如果宽度较大，徽标将再次分离并附加到DOM中的旧位置。

＆＃13;

nav

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

现在问题出现在手机上（并且仅在Android上反馈），当您点击输入字段输入搜索查询时，<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>正在激活，搜索容器将分离并附加本身在同一个空间。我不知道为什么会这样。当我使用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

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

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

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上，如果输入字段的字体大小小于16像素，则“ ios”会自动缩放页面。将输入字段的字体大小设置为16px可以解决此问题。

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

4 个答案: