输入字段可防止页面在iPhone上滚动

Question

我在一个有很多表格的网站上工作。我注意到，当您在iPhone上滚动/滑动网站时，如果手指位于输入字段上，则页面不会滚动。要滚动，您必须将手指对准身体。

是否有人对导致这种奇怪行为的原因有任何想法？

它只是包装在表单标签中的简单输入。

Answer 1

此问题的解决方法可能是：

function setTextareaPointerEvents(value) {
    var nodes = document.getElementsByTagName('textarea');
    for(var i = 0; i < nodes.length; i++) {
        nodes[i].style.pointerEvents = value;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    setTextareaPointerEvents('none');
});

document.addEventListener('touchstart', function() {
    setTextareaPointerEvents('auto');
});

document.addEventListener('touchmove', function() {
    e.preventDefault();
    setTextareaPointerEvents('none');
});

document.addEventListener('touchend', function() {
    setTimeout(function() {
        setTextareaPointerEvents('none');
    }, 0);
});

这将使 Mobile Safari（其他尚未测试的浏览器）忽略滚动的文本区域，但允许像往常一样设置焦点等。