Question

在iOS 8的Safari上，当我专注于<input>元素时，整个页面会突然跳下，然后返回原始位置。我的页面布局填满整个屏幕，不打算滚动。

您可以在我的网络应用https://weminder-app-demo.storycloud.co上观看运行iOS 8的iDevice上的这种急动（点击右上角的“注册”以查找要关注的一些输入，例如“电子邮件”或“密码“输入”。（我使用的是第5代iPod Touch。）

这似乎与here和here以及this video中观察到的错误相同。这些情况下的解决方案是Cordova应用程序，但我没有构建Cordova应用程序，我只是为Mobile Safari创建一个网站。

我尝试按照建议here添加html, body { position: fixed; }，但这不起作用。

我会尝试使用许多人之前提供的ontouchmove建议来“禁用滚动”，但这不是由用户触发的滚动，而是自动滚动。

我已尝试按照建议here添加onfocus="window.scrollTo(0, 0);"，但这不起作用，我不希望它给出对该答案的评论：

这看起来应该可行，但它在Safari中使用iOS 8的iPhone 5S上并不适用。 event.preventDefault()与您的解决方案相结合似乎肯定会有效，但我仍然可以获得默认的滚动行为。 - benny 3月17日17:53

如何防止这种反弹？

Answer 1

试试这个，在我的案例中工作：

$(document)
    .on('focus', 'input', function(e) {
        $('body').addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $('body').removeClass('fixfixed');
    });
}

在我的情况下，当我专注于输入时，我在网上转换绝对的所有固定元素以修复iOS中的问题：

$(document)
    .on('focus', 'input', function(e) {
        $('body').addClass('fixfixed');
        $('*').filter(function() {
            return $(this).css("position") === 'fixed';
        }).addClass('fixfixed');
    })
    .on('blur', 'input', function(e) {
        $('body').removeClass('fixfixed');
        $('*').filter(function() {
            return $(this).css("position") === 'fixed';
        }).removeClass('fixfixed');
    });
}

class fixfixed有一个位置：absolute！important;

我认为第一种解决方案适合您的情况

Answer 2

我发现这个问题是由我们的一段代码造成的，该代码将页面的scrollTop设置为0焦点。难怪！

document.addEventListener('focusin', function (event) {
    if (event.target.tagName === 'INPUT') {
        document.body.scrollTop = 0;
    }
});

以下是演示我的问题的演示：http://shareitdammit.com/f/q4ry3gQi/index.html

只需删除底部脚本，问题就会消失。

Answer 3

如果您以编程方式关注元素，则对我有用：

setTimeout(() => {
  element.focus();
});

iOS 8页面跳转输入焦点

3 个答案: