iOS/WebKit: touchmove/touchstart ne fonctionne pas en entrée et zone de texte

Question

J'ai une application Web IOS qui ne peut pas être défilée. Pour cette raison, je veux désactiver le défilement. Pour ce faire, j'utilise l'attribut ontouchmove d'un élément et je lui demande d'appeler une fonction qui utilise element.preventDefault. Cependant, je ne peux détecter aucun événement touchant lorsqu'il démarre sur une zone de texte ou un élément d'entrée, même lorsque l'élément est désactivé! J'ai également essayé de lier l'événement touchmove ou touchstart à ces éléments via addEventlistener de JavaScript, sans succès!

Et voici mon JavaScript:

function onBodyLoad() { 

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

} 

function doNotScroll(event) { 

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

} 

Merci pour toute aide!

Answer 1

Je pense que je l'ai trouvé une grande solution à ce problème en utilisant le « pointer-events » propriété 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); 
}); 

Cela fera Safari Mobile sur iOS (d'autres pas testés jusqu'à présent) ignorer les textareas pour faire défiler mais permet de régler la mise au point etc. comme d'habitude.

Answer 2

le Thomas Bachem answer est celui!

Je l'ai réécrit dans jQuery. Il suffit d'ajouter une classe scrollFix à vos entrées souhaitées et vous êtes prêt à partir. Ou attachez les gestionnaires d'événements à toutes les entrées et zones de texte en utilisant $('input, textarea'). Maintenant, quand vous touchez et faites défiler une entrée sur iOS 8+, l'entrée obtient tous ses pointer-events désactivés (y compris le comportement problématique). Ceux pointer-events sont activés lorsque nous détectons un simple contact.

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