iOS/WebKit：touchmove/touchstart无法处理输入和文本区

问题描述：

我有一个无法滚动的IOS Web应用程序。为此，我想停用滚动。为此，我使用元素的ontouchmove属性，并让它调用一个使用element.preventDefault的函数。但是，即使在元素被禁用的情况下，当我在textarea或input元素上启动时，我无法检测到任何触摸事件！我也尝试通过JavaScript的addEventlistener将touchmove或touchstart事件绑定到这些元素，但没有成功！iOS/WebKit：touchmove/touchstart无法处理输入和文本区

下面是我的JavaScript：

function onBodyLoad() { 

document.addEventListener("touchstart", doNotScroll, true); 
document.addEventListener("touchmove", doNotScroll, true); 

} 

function doNotScroll(event) { 

event.preventDefault(); 
event.stopPropagation(); 

}

感谢您的帮助！

我想出了一个部分解决方案：http://mobweb.ch/2010-12-06-iosphonegap-prevent-scrolling-when-gesture-starts-on-input-element - 还在寻找的东西更好的寿！ – 2010-12-06 15:41:01

答

我想我已经找到使用“指针事件” CSS属性针对此问题的解决方法很大：

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) { 
    e.preventDefault(); 
    setTextareaPointerEvents('none'); 
}); 

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

这将使移动Safari浏览器在iOS（别人迄今没有测试）忽略的textareas用于滚动，但允许像往常一样设置焦点等。

我的英雄！适用于Safari和Chrome for iPad。 – nothingisnecessary 2016-03-29 18:55:26

这仍然是一个有效的解决方案吗？我使用Dotgreg的jQuery实现，虽然它允许您滚动，但无法集中输入。请记住，有问题的形式是在Fancybox的v2灯箱，只是为了增加痛苦。在运行iOS 10的6 Plus和运行iOS10的7上使用BrowserStack进行测试。 – Bobe 2017-05-05 05:09:15

答

该Thomas Bachem answer是一个！

我在jQuery中重写了它。只需添加一个类scrollFix到你想要的输入，你就可以开始了。或者使用$('input, textarea')将事件处理程序附加到所有输入和textareas。

现在，当您触摸并滚动iOS 8+上的输入时，输入将禁用其所有pointer-events（包括问题行为）。当我们检测到简单的触摸时，那些pointer-events被启用。

$('.scrollFix').css("pointer-events","none"); 

$('body').on('touchstart', function(e) { 
    $('.scrollFix').css("pointer-events","auto"); 
}); 
$('body').on('touchmove', function(e) { 
    $('.scrollFix').css("pointer-events","none"); 
}); 
$('body').on('touchend', function(e) { 
    setTimeout(function() { 
     $('.scrollFix').css("pointer-events", "none"); 
    },0); 
});

iOS/WebKit：touchmove/touchstart无法处理输入和文本区

相关推荐