iOS/WebKit: touchmove/touchstart non funziona su input e area di testo

Question

Possiedo un'app Web IOS che non è possibile scorrere. Per questo motivo voglio disattivare lo scorrimento. Per fare ciò, uso l'attributo ontouchmove di un elemento e chiamarlo una funzione che utilizza element.preventDefault. Tuttavia, non sono in grado di rilevare alcun evento toccante quando si avvia su una textarea o su un elemento di input, anche quando l'elemento è disabilitato! Ho anche provato a collegare l'evento touchmove o touchstart a questi elementi tramite l'addEventlistener di JavaScript, senza successo!

Ed ecco la mia JavaScript:

function onBodyLoad() { 

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

} 

function doNotScroll(event) { 

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

} 

Grazie per qualsiasi aiuto!

Answer 1

Credo di aver trovato una grande soluzione per questo problema utilizzando il "puntatore-eventi" proprietà 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); 
}); 

questo renderà Safari Mobile su iOS (gli altri non testati finora) ignorare le textarea per lo scorrimento ma consente di impostare la messa a fuoco ecc. come al solito.

Answer 2

il Thomas Bachem answer è quello!

Ho riscritto in jQuery. Basta aggiungere una classe scrollFix agli ingressi desiderati e sei pronto per partire. In alternativa, collega i gestori di eventi a tutti gli input e i textareas utilizzando $('input, textarea').

Ora quando si tocca e si scorre su un ingresso su iOS 8+, l'ingresso ottiene tutti i suoi pointer-events disabilitati (compreso il comportamento problematico). Quelle pointer-events sono attivate quando rileviamo un semplice tocco.

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