Les événements tactiles ne fonctionnent-ils pas avec les éléments de saisie de texte dans l'iPad Safari?

Question

Dans Safari iPad, j'ai programmé les événements tactiles d'un DIV de sorte que lorsque vous touchez à l'intérieur du DIV et que vous y mainteniez votre doigt pendant 500   ms, la couleur de fond du DIV change.

Lorsque j'essaie de déplacer le code vers un élément de saisie de texte (à l'intérieur d'un jeu de champs), ce qui en fait la cible tactile au lieu du DIV, le code ne fonctionne pas. Le texte d'entrée est alors sélectionnée en dépit de ce CSS:

input[type=text] {-webkit-touch-callout:none; -webkit-user-select:none } 

est-il pas un moyen d'intercepter les événements tactiles d'un élément d'entrée de texte dans iPad Safari et les manipuler d'une manière personnalisée, ce qui empêche le comportement par défaut? Ou y a-t-il quelque chose de plus que je dois faire pour obtenir l'apport nécessaire? J'ai essayé avec et sans gestionnaire de clic factice: onclick = "void (0)".

Ceci est le document que je suis la documentation Handling Events.

Answer 1

Il serait utile que vous écriviez votre code, mais je pense que vous devez probablement empêcher le comportement par défaut sur les événements tactiles. Cela ressemble à ceci si vous utilisez jQuery:

$("#ID") 
     .bind("touchstart", 
      function (e) { 
       e.preventDefault(); 
       //do something 
      }) 
     .bind("touchmove", 
      function (e) { 
       if (e.preventDefault) { 
        e.preventDefault(); 
       } 
       //do something 
      }); 

Answer 2

Essayez de désactiver et faire votre entrée en lecture seule:

<input type="text" readonly /> 

Answer 3

Si vous ne l'appelez pas preventDefault() dans votre code de gestionnaire, le navigateur passe automatiquement touchez l'événement à l'implémentation par défaut (après avoir pensé que vous l'avez géré). L'implémentation par défaut consiste à sélectionner le champ. Dans votre cas, appelez preventDefault() et stopPropagation() dans votre gestionnaire, et renvoyez false. Cela empêche l'événement de bouillonner davantage. Ensuite, vous pouvez totalement contrôler votre élément d'entrée. Avertissement: Vous perdrez également le comportement par défaut du champ de saisie! En d'autres termes, vous ne serez pas en mesure de saisir du texte dans le champ! Ou si le champ de saisie est un <select>, vous ne serez pas en mesure de tirer la liste, etc.

Je suppose que ce que vous voulez vraiment est: 1) Si l'utilisateur appuie et maintient pendant 500ms, puis devient jaune, 2) et/ou lors de la libération, activez le champ de saisie. Dans ce cas, vous devrez remonter manuellement l'événement lorsque vous voulez vraiment utiliser le champ de saisie.

Ce type de situation est très commun lors de la programmation de l'iPad. Par exemple, dans de nombreux cas, vous voudriez détecter un mouvement tactile (même sur un champ de saisie) et l'interpréter comme un mouvement, mais interpréter un mouvement tactile (sans bouger) comme un clic pour activer le champ de saisie . Vous devez faire ce que je suggère ci-dessus: preventDefault() et renvoyer l'événement si nécessaire.