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

2023年10月19日 182次阅读

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

<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)当焦点激活时,父块丢失位置：固定

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

点赞