更改焦点表单元素ipad Web应用程序时禁用滚动

Question

我有一个网络应用程序.我正在尝试禁用/阻止当您专注于不同的表单输入时发生的滚动(即,当您通过表单中的输入元素前进时发生的滚动).

我已经禁用了滚动:

 <script type="text/javascript">
     $(document).ready(function() {
         document.ontouchmove = function(e){
              e.preventDefault();
              }
     });
 </script>

要添加更多信息 - 我的页面包含一些"幻灯片".每个都是768x1024,它们在页面上"堆叠"(即页面是768x3072 [1024*3 = 3072]),当你点击链接我正在使用scrollTo jquery插件滚动到下一个"幻灯片"并.focus()在输入元素.

有谁知道如何做到这一点？

Answer 1

我发现在UIWebView中,document.body有时也会被移动.所以我使用:

    input.onfocus = function () {
        window.scrollTo(0, 0);
        document.body.scrollTop = 0;
    }

Answer 2

哎呀,window.scrollTo建议有点糟糕,让事情变得无法预测.

尝试更好的解决方案:

jQuery('body').bind('focusin focus', function(e){
  e.preventDefault();
})

或者,只需勾选您的输入:

jQuery('input.your-input-class').bind('focusin focus', function(e){
  e.preventDefault();
})

为什么？默认情况下,浏览器可以将焦点表单元素滚动到视图中"焦点"事件被触发(Firefox有一个错误,因此挂钩焦点).所以,告诉他们不要明确地这样做.

顺便说一句,如果focus事件是由element.focus()您的代码触发的,那么即使是解决方案也无法正常运行.

因此,解决方案将取代您focus触发select,即

element.select()

以外 element.focus()

如果你不喜欢这个element.select()方法,因为它将select输入元素中的文本,然后尝试创建一个Range object输入元素文本并将其折叠,如果你愿意,抱歉没有时间尝试这一点.

Answer 3

为了防止浏览器滚动到您将焦点移到的元素，我使用了 jQueryone事件侦听器。在我将焦点移到元素之前，我们将侦听器添加到scroll事件和计数器滚动中。事件侦听器随后被 jQuery 删除。

var oldScroll = $(window).scrollTop();

$( window ).one('scroll', function() {
    $(window).scrollTop( oldScroll ); //disable scroll just once
});

$('.js-your-element').focus();

这种方式对我来说似乎简单、有效，并且在我所做的所有测试中都非常有效。

希望它可以帮助某人。