移动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操作系统做到这一点。

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