Question

我有以下情况：敏感网站，粘贴标题和粘贴标题中的搜索输入。

问题出现在手机和手机上当我滚动页面并单击搜索输入时，它会集中在输入字段并显示手机键盘并将页面滚动到DOM中的输入字段（位于我的html代码的开头）

如何防止滚动到顶部，并专注于我的搜索栏？我不确定我是否清楚地解释了它。这就是为什么我要附加一个有问题的视频 - https://youtu.be/7UOiDmEvp4U

Answer 1

我认为您必须设置e.preventDefault();。也许下面的代码可以帮助你。

$(function() {
  $('nav').on('click', '.search', function(e) {
    e.preventDefault();
    var $el = $(e.currentTarget);
    
    $el.find('input').addClass('large').focus();
  });
})

body {
  height: 600px;
}
nav {
  position: fixed;
  top: 0;
  left:0;
  background: #333;
  color: #fff;
  width: 100%;
  padding: 20px;
}
.search .fa {
  cursor: pointer;
 }
.search input {
  width: 50px;
  transition: all 0.3s;
}
.search input.large {
  width: 200px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<nav>
  <div class="search"><i class="fa fa-search"></i>
    <input>
  </div>
</nav>

Answer 2

在iOS 8 +

中修复了位置错误

以下是我用来解决问题的方法：https://gist.github.com/AlexanderOMara/8747f59b6450878e78c7

专注于粘条强制页面中的输入以滚动到顶部

2 个答案: