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

Question

我在文档的touchstart上使用preventDefault()来防止页面上的滚动。不幸的是，这防止了太多。用户不能再将焦点放在输入(并打开软键盘)。使用jQuery focus()，我可以将焦点分配给touchstart上的输入。这会打开iOS上的软键盘(大多数情况下)，但不会在安卓上打开。

背景

我有一个网页，我想做尽可能像一个移动应用程序。我只关心安卓和iOS，但任何形式的因素。首先，使页面中的内容与屏幕大小完全相同。这是很好的，直到用户把他们的手指在页面上。我需要防止用户滚动。下面的代码实现了这一点，但在这两个操作系统上的方式略有不同。

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

在iOS上，这可以防止弹性滚动:用户可以通过尝试从页面上滚动来显示网页后面的纹理。这个特性对于一个普通的网页是很好的，但在我的例子中，它减少了UX。

在Android上，防止暴露我用来隐藏地址栏的方便的黑客攻击。Android浏览器从地址栏开始，但当用户向下滚动页面时，地址栏就消失了。要以编程方式强制浏览器隐藏地址栏，只需将这一行代码添加到加载时调用的函数中即可。

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

这是告诉android浏览器我们已经滚动过的一种麻烦事(但也是唯一的)方法，地址栏已经不再需要了。

没有文档上的preventDefault，Android浏览器将允许滚动，地址栏可以显示。

因此，这两个操作系统都有一个很好的理由让这个preventDefault()在文档的每个触摸屏上调用，但是它防止了太多。敲击输入字段没有任何作用。使用对jQuery focus()的调用可能会有所帮助，但只会打开iOS上的软键盘，而不是安卓。

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

如何防止页面滚动，但如何使用浏览器本机功能将焦点分配给输入字段？

注:此代码

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

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

Answer 1

实际上，我在另一个项目中解决了这个问题，忘记了这个问题，并在打字的过程中记住了这个问题。

他们的关键是在触地移动的时候做。

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

但是，touchstart上的preventDefault做了各种各样的好事，比如阻止在启用手势的幻灯片上设置图像保存菜单。我的项目也包括这个。

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

如果有人对更多的内容或如何重新格式化有一些建议，以使它能够接触到更多的观众，那就太好了。我从来没有在一个地方看到过我这里的所有内容，所以我觉得需要这样做。

Answer 2

把两者结合起来！

// prevent scrolling from outside of input field
$(document).on('touchstart', function(e) {
    if (e.target.nodeName !== 'INPUT') {
        e.preventDefault();
    }
});

// prevent scrolling from within input field
$(document).on('touchmove', function(e) {
    if (e.target.nodeName == 'INPUT') {
        e.preventDefault();
    }
});

这可能也不完美，我特别担心第一个函数会阻止后续链接，但我会让其他人来进行广泛的测试。

Answer 3

问题的简单答案是，不要使用"preventDefault“，而是使用指针-事件css属性来禁用滚动元素上的滚动。

CSS用于您的输入：

input {
    pointer-events: auto !important;
}

touchstart事件侦听器：

document.body.addEventListener('touchstart', function(e) {
    if (e.target.nodeName === 'INPUT') {
        this.style.pointerEvents = 'none';
    }
});

当你模糊输入时，你需要重置指针事件.

document.body.pointerEvents = 'auto';

+1个好问题