iOS / WebKit：touchmove / touchstart不能用于输入& textarea的 [英] iOS/WebKit: touchmove/touchstart not working on input & textarea

问题描述

我有一个无法滚动的IOS Web App。出于这个原因，我想停用滚动。为此，我使用元素的ontouchmove属性并让它调用一个使用element.preventDefault的函数。
但是，当它在textarea或input元素上启动时，即使元素被禁用，我也无法检测到任何触摸事件！我也尝试通过JavaScript的addEventlistener将touchmove或touchstart事件绑定到这些元素，但没有成功！

I have an IOS Web App that can't be scrolled. For that reason I want to deactivate scrolling. To do this, I use an element's ontouchmove attribute and have it call a function that uses element.preventDefault. However, I am unable to detect any touching event when it starts on a textarea or input element, even when the element is disabled! I have also tried binding the touchmove or touchstart event to these elements via JavaScript's addEventlistener, without success!

这是我的JavaScript：

And here's my JavaScript:

function onBodyLoad() {

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

}

function doNotScroll( event ) {

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

}

感谢您的帮助！

推荐答案

我想我已经使用pointer-eventsCSS属性为这个问题找到了一个很好的解决方法：

I think I've found a great workaround for this issue using the "pointer-events" CSS property:

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);
});

这将使iOS上的Mobile Safari（其他未经测试）忽略textareas滚动但允许像往常一样设置焦点等。

This will make Mobile Safari on iOS (others not tested so far) ignore the textareas for scrolling but allows to set focus etc. as usual.

这篇关于iOS / WebKit：touchmove / touchstart不能用于输入& textarea的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！