Jquery 更改焦点表单元素时禁用滚动ipad web app

我有一个网络应用程序。我试图禁用/阻止当您关注不同的表单输入时发生的滚动（即，在表单中的输入元素中前进时发生的滚动）

我已经禁用了以下滚动：

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

$（文档）.ready（函数（）{
document.ontouchmove=函数（e）{
e、 预防默认值（）；
}
});

要添加更多的信息，我有一些我的页面包含的“幻灯片”。每一个都是768x1024，它们“堆叠”在页面上（即页面是768x3072[1024*3=3072]），当您单击链接时，我正在使用scrollTo jquery插件滚动到输入元素上的下一个“幻灯片”和

.focus（）

---

有人知道怎么做吗？

试试BLSully。最初为所有输入元素指定一个

readonly=“readonly”

属性。这将阻止Mobile Safari滚动到它。删除焦点属性，然后在每个元素的模糊中再次添加该属性。

请BLSully尝试。最初为所有输入元素指定一个

readonly=“readonly”

属性。这将阻止Mobile Safari滚动到它。删除焦点上的属性，然后为每个元素再次添加模糊属性。

如果不希望输入可编辑，则kpozin的答案可以正常工作。但是，一旦删除

readonly

属性

onfocus

或

onclick

，输入字段将再次在焦点中滚动

真正有帮助且不影响焦点或文本输入能力的是向输入元素添加

onFocus=“window.scrollTo（0，0）；”

当然，您必须保证屏幕键盘不包含相关输入

---

另请参阅本文：

如果您不希望输入可编辑，那么kpozin的答案可以正常工作。但是，一旦删除

readonly

属性

onfocus

或

onclick

，输入字段将再次在焦点中滚动

真正有帮助且不影响焦点或文本输入能力的是向输入元素添加

onFocus=“window.scrollTo（0，0）；”

当然，您必须保证屏幕键盘不包含相关输入

---

另请参阅本文：

我发现在UIWebView中，document.body有时也会被移动。因此，我使用：

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

---

我发现在UIWebView中，document.body有时也会被移动。因此，我使用：

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

这对我很有用（使用jQuery）。它允许滚动，然后在您离开输入时将您返回到正确的位置

    var saveScrollLeft;
    $("input, textarea")
        .focus(function () {
            clearTimeout(blurTimeoutId);
            saveScrollLeft = $("body").scrollLeft();
            })
        .blur(function () {
            // The user might be moving from one input to another, so we don't want to quickly scroll on blur.  Wait a second and see if they are off all inputs.
            blurTimeoutId = setTimeout(function () {
                $(window).scrollLeft(saveScrollLeft);
                }, 1000);
        });

这对我很有用（使用jQuery）。它允许滚动，然后在您离开输入时将您返回到正确的位置

    var saveScrollLeft;
    $("input, textarea")
        .focus(function () {
            clearTimeout(blurTimeoutId);
            saveScrollLeft = $("body").scrollLeft();
            })
        .blur(function () {
            // The user might be moving from one input to another, so we don't want to quickly scroll on blur.  Wait a second and see if they are off all inputs.
            blurTimeoutId = setTimeout(function () {
                $(window).scrollLeft(saveScrollLeft);
                }, 1000);
        });

---

更新-我看到了

窗口。在几个不同的地方滚动（0,0）

解决方案，但它似乎只会让情况变得更糟。我的页面上有多个内联文本输入，因此在它们之间移动焦点时，Safari中的自动上下滚动使页面几乎无法使用，尤其是在横向方向

在与iOS 8对抗一周后，我发现它停止了滚动。当您需要将onblur事件附加到某个元素时，将焦点从一个元素更改为另一个元素时，此选项起作用：

var moveFocus = function (blurId, focusId) {
    var blurInput = document.getElementById(blurId);
    var focusInput = document.getElementById(focusId);
    if (blurInput && focusInput) {
        blurInput.onblur = function () {
            if (focusInput.setSelectionRange && focusInput.setSelectionRange()) {
                var len = focusInput.value.length;
                focusInput.setSelectionRange(len, len);
            }
            focusInput.focus();
        };
        focusInput.focus();
    };
};

---

更新-我看到了

窗口。在几个不同的地方滚动（0,0）

解决方案，但它似乎只会让情况变得更糟。我的页面上有多个内联文本输入，因此在它们之间移动焦点时，Safari中的自动上下滚动使页面几乎无法使用，尤其是在横向方向

在与iOS 8对抗一周后，我发现它停止了滚动。当您需要将onblur事件附加到某个元素时，将焦点从一个元素更改为另一个元素时，此选项起作用：

var moveFocus = function (blurId, focusId) {
    var blurInput = document.getElementById(blurId);
    var focusInput = document.getElementById(focusId);
    if (blurInput && focusInput) {
        blurInput.onblur = function () {
            if (focusInput.setSelectionRange && focusInput.setSelectionRange()) {
                var len = focusInput.value.length;
                focusInput.setSelectionRange(len, len);
            }
            focusInput.focus();
        };
        focusInput.focus();
    };
};

---

哎呀，

窗口。建议滚动到
有点糟糕，让事情变得不可预测

尝试以下更好的解决方案：

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

或者，只需挂接您的输入：

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

为什么?？默认情况下，浏览器可能会在触发“focusin”事件时将焦点表单元素滚动到视图中（Firefox有一个bug，所以改为挂接焦点）。所以，告诉他们不要这么做

顺便说一句，如果
focus
事件是由代码中的
element.focus（）
触发的，那么即使是onsolution也不会起作用

因此，解决这个问题的一个方法是将您的
焦点
触发器替换为
选择
，即

element.select()

而不是
元素。焦点（）

如果您不喜欢
元素。select（）
方法，因为它将
选择输入元素中的文本，然后尝试创建输入元素文本的
范围对象，如果愿意，请将其折叠，抱歉现在没有时间尝试。
oops，建议的
窗口。scrollTo
有点糟糕，让事情变得不可预测

尝试以下更好的解决方案：

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

或者，只需挂接您的输入：

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

为什么?？默认情况下，浏览器可能会在触发“focusin”事件时将焦点表单元素滚动到视图中（Firefox有一个bug，所以改为挂接焦点）。所以，告诉他们不要这么做

顺便说一句，如果
focus
事件是由代码中的
element.focus（）
触发的，那么即使是onsolution也不会起作用

因此，解决这个问题的一个方法是将您的
焦点
触发器替换为
选择
，即

element.select()

而不是
元素。焦点（）

如果您不喜欢
元素。select（）
方法，因为它将
选择输入元素内的文本，然后尝试创建输入元素文本的
范围对象
，如果愿意，请将其折叠，抱歉，现在没有时间尝试此操作。
为了防止浏览器滚动到您将焦点移动到的元素，我使用jQuerys事件侦听器。就在我将焦点移到元素之前，我们将侦听器添加到
scroll
事件和计数器滚动中。这个