мобильный Safari: предотвратить страницу прокрутки, когда фокус ввода на

Question

Я пытаюсь предотвратить страницу прокрутки, когда пользователь кран на входе:

<pre class="js-parent"> 
    <input value="tap to focuss" readonly> 
</pre> 

$("input").on("focus", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
}); 

$("input").on("click", function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    this.setSelectionRange(0, 9999); 
}); 

несколько проблем:

1), когда пользователь нажимает на входной странице свитке к элементу (в верхней части страницы)

2), когда фокус активен, родительский блок теряет position: fixed

demo

demo with code

Answer 1

Вы можете обмануть сафари считает, что в настоящее время сосредоточены вход в верхней части страницы, так что нет необходимости для прокрутки вниз, на следующий трюк:

$(document).on('touchstart', 'textarea, input[type=text], input[type=date], input[type=password], input[type=email], input[type=number]', function(e){ 

      var intv = 100; 
      var $obj = $(this); 

      if (getMobileOperatingSystem() == 'ios') { 

       e.stopPropagation(); 

       $obj.css({'transform': 'TranslateY(-10000px)'}).focus(); 
       setTimeout(function(){$obj.css({'transform': 'none'});}, intv); 
      } 
      return true; 
     }); 

Вы можете найти более подробности в следующем потоке, который показывает, как это сделать для android os.

jquery mobile How to stop auto scroll to focused input in Mobile web browser