iOS/WebKit: touchmove/touchstart nie działa na wejściu i textarea

Question

Mam aplikację internetową IOS, której nie można przewinąć. Z tego powodu chcę dezaktywować przewijanie. Aby to zrobić, używam atrybutu ontouchmove elementu i wywołuję funkcję używającą elementu.preventDefault. Jednak nie jestem w stanie wykryć żadnego zdarzenia dotykowego, gdy rozpoczyna się ono na polu tekstowym lub elemencie wejściowym, nawet jeśli element jest wyłączony! Próbowałem również powiązać zdarzenie touchmove lub touchstart z tymi elementami za pomocą addEventlistener JavaScriptu, bez powodzenia!

A oto moja JavaScript:

function onBodyLoad() { 

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

} 

function doNotScroll(event) { 

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

} 

Dzięki za wszelką pomoc!

Answer 1

myślę Znalazłem wielki obejście tego problemu za pomocą wskaźnika „Zdarzenia” własności 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); 
}); 

uczyni Mobile Safari na iOS (inni nie testowano dotychczas) ignorować pola tekstowe do przewijania, ale pozwala ustawić ostrość jak zwykle.

Answer 2

the Thomas Bachem answer jest jednym!

Przepisałem go w jQuery. Wystarczy dodać klasę scrollFix do żądanych wejść i jesteś gotowy do pracy. Lub załączyć procedury obsługi zdarzeń do wszystkich danych wejściowych i tekstowych za pomocą $('input, textarea').

Teraz po dotknięciu i przewinięciu wejścia w systemie iOS 8+ dane wejściowe zostają wyłączone (pointer-events) (w tym problematyczne zachowanie). Te pointer-events są włączone, gdy wykryjemy prosty dotyk.

$('.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); 
});