сосредоточиться на вводе в липкой панели принудительно прокрутить страницу вверх

У меня следующая ситуация: адаптивный сайт, липкая шапка и поисковый ввод в липкой шапке.

Проблема появляется на телефоне и планшете, когда я прокручиваю страницу и нажимаю ввод поиска, он фокусируется на поле ввода и показывает клавиатуру телефона и прокручивает страницу туда, где поле ввода находится в DOM (которое находится в начале моего HTML-код)

Как предотвратить прокрутку вверх и сосредоточиться на моей панели поиска? Я не уверен, что ясно объяснил. Поэтому прикрепляю видео с проблемой - https://youtu.be/7UOiDmEvp4U


mobile focus html css responsive
person vkuzmov    schedule 11.07.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Оказывается, в iOS 8+ исправлена ​​ошибка с позицией.

Вот что я использовал для решения проблемы: https://gist.github.com/AlexanderOMara/8747f59b6450878e78c7

person vkuzmov    schedule 13.07.2016

arrow_upward
0
arrow_downward

Я думаю, что вы должны установить 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>

person Phil    schedule 11.07.2016
comment
спасибо за ваш ответ, но, к сожалению, он делает то же самое, что показано в видео :( - person vkuzmov; 11.07.2016