移动Safari：在关注输入时阻止滚动页面

Posted 2021-05-02

当用户点击输入时，我试图阻止滚动页面：

<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

答案

你可以欺骗safari认为当前的焦点输入位于页面的顶部，所以不需要向下滚动，通过以下技巧：

$(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