防止在移动浏览器上滚动,而不会阻止输入聚焦

Question

我在文档的touchstart上使用preventDefault()以防止在页面上滚动.不幸的是,这可以防止太多 用户无法再将焦点放在输入上(并打开软键盘).使用jQuery focus(),我可以将焦点放在touchstart上的输入上.这会在iOS上打开软键盘(大部分时间),但从不在Android上打开.

背景:

我有一个网页,我想尽可能多的移动应用程序.我只关心Android和iOS,但任何形式因素.我首先使页面中的内容与屏幕大小完全相同.这很好,直到用户将手指放在页面上.我需要阻止用户滚动.以下代码实现了这一点,但在两个操作系统上的方式略有不同.

$(document).on('touchstart', function(e) {
    e.preventDefault();
});

在iOS上,这会阻止弹性滚动:用户可以通过尝试滚动页面来显示网页后面的纹理.该功能对于常规网页来说很不错,但在我的情况下它会降低用户体验.

在Android上,防止我用来隐藏地址栏的方便黑客的启示.Android浏览器以地址栏可见开头,但当用户向下滚动页面时,它会消失.要以编程方式强制浏览器隐藏地址栏,只需将此行代码添加到您在load时调用的函数中.

$('html, body').scrollTop(1);

这是告诉Android浏览器我们已经滚动的hacky(但也是唯一的)方法,并且不再需要地址栏.

如果没有文件上的preventDefault,Android浏览器将允许滚动并显示地址栏.

因此,两个操作系统都有充分的理由在文档的每个touchstart上调用preventDefault(),但它可以防止太多.点击输入字段不起作用.使用jQuery focus()调用可以提供帮助,但只能打开iOS上的软键盘,而不是Android.

$('input').on('touchstart', function() {
    $(this).focus();
});

如何阻止页面滚动,但使用浏览器本机功能将焦点放在输入字段上？

注意:此代码

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

是有缺陷的,因为只要初始触摸源自输入字段内,用户仍然可以滚动页面.

Answer 1

我实际上在另一个项目上解决了这个问题,忘记了它,并通过输入它来记住它的大部分内容.

他们的关键是在touchmove上做它.

$(document).on('touchmove', function(e) {
    e.preventDefault();
});

但是,touchstart上的preventDefault会执行各种不错的操作,例如在启用手势的幻灯片中阻止图像保存菜单.我的项目也包括这个.

$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

如果有人对其他内容有一些建议或如何重新格式化,以便它可以达到更好的观众.我从来没有在一个地方看到过我所拥有的内容,所以我觉得它需要在SO上.