jquery.interface.toucher.punch.le script js empêche les fonctionnalités d'entrée sur les appareils tactiles

JEditable + jQuery UI Sortable + jquery.interface.touch-punch

j'ai passé toute la journée sur ce problème et j'ai enfin trouvé la solution. La solution est très similaire à la réponse de kidwon. Cependant, j'utilisais jeditable qui crée dynamiquement des champs d'entrée Sans noms de classe. J'ai donc utilisé cette instruction conditionnelle au lieu de vérifier le nom de la classe:

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
  event.stopPropagation();
} else {
  event.preventDefault();
}

je pense que c'est une meilleure solution qu'il utilise toujours la fonctionnalité native pour toute entrée ou les champs textarea.

modifier cette section en jquery.interface.touch-punch.js (sur environ la ligne 30):

function simulateMouseEvent (event, simulatedType) {

// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
  return;
}

event.preventDefault();

var touch = event.originalEvent.changedTouches[0],
    simulatedEvent = document.createEvent('MouseEvents');

À:

function simulateMouseEvent (event, simulatedType) {

// Ignore multi-touch events
if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
    simulatedEvent = document.createEvent('MouseEvents');

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
    event.stopPropagation();
} else {
    event.preventDefault();
}

bonne chance!

merci à @Danwilliger et @jeremytripp pour la solution. Etant donné que cette question est connue depuis des années et qu'elle n'a pas encore été travaillée dans le cadre de la mise à jour de Git-punch de l'auteur, je l'ai fourrée avec la solution ajoutée ici:

https://github.com/copernicus365/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js

je serais très heureux pour l'auteur d'incorporer ces quelques lignes d'un changement dans la bibliothèque d'origine, et de ce faire un inutile, alors, mais si cela n'arrive jamais, c'est agréable d'avoir un fichier source unique de référence.

ok voici une autre solution si votre textfield quel que soit L'élément HTML qui n'est pas focalisé,le défilement, la sélection des mots, le déplacement du curseur texte autour du texte et quels que soient les différents scénarios qui peuvent survenir, vous pouvez outrepasser le jquery.interface.toucher.punch.js script. Je suppose que votre élément n'est pas déplaçable, mais probablement un enfant de mon cas.

Mettre une classe sur votre élément html, par exemple,class="useDefault". Puis allez dans le fichier script et trouvez que partie:

...
function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
      return;
    }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');
....

Comme vous pouvez probablement voir event.preventDefault(); assure que jquery.interface.toucher.punch.js remplace les comportements par défaut du navigateur. Pour éviter cela pour notre noeud de classe particulier, faites les modifications suivantes:

if (event.originalEvent.touches.length > 1) {
  return;
}
var touch = event.originalEvent.changedTouches[0],
  simulatedEvent = document.createEvent('MouseEvents');
//As you can see here is your class element check
if (touch.target.className === "useDefault") {
  event.stopPropagation();
} else {
  event.preventDefault();
}

cette solution est testée avec webkit navigateurs seulement et jQuery UI Touch Punch 0.2.2 libération.

espérons que la solution rapide Aide, BR

la réponse de Jacob a fonctionné avec une légère modification-j'ai trouvé que l'utilisation du click événement a entraîné un comportement incohérent sur iPad, ios9 Safari. Parfois, j'appuyais une fois sur un champ et il se concentrait, d'autres fois, j'ai dû appuyer trois fois. Changer clicktouchstart j'ai résolu le problème pour moi (j'ai aussi utilisé la délégation d'événement puisque mon formulaire a été ajouté dynamiquement):

$('form').on('touchstart', 'input,textarea',function(){
    $(this).focus();
});

j'ai en fait essayé d'ajouter les lignes dont Danwilliger a parlé, ça n'a pas fait l'affaire pour moi.

ce qui a fonctionné pour moi était

//Check if element is an input or a textarea
if ($(touch.target).is("input") || $(touch.target).is("textarea")) {
  event.stopPropagation();
  $(touch.target).focus();
} else {
  event.preventDefault();
}

Je ne suis pas vraiment sûr pourquoi les autres réponses postées n'ont pas fonctionné, mais pour quelqu'un d'autre là-bas s'ils ont le même problème essayer ma solution :).

une solution est d'utiliser une poignée. Ajoutez une icône à l'intérieur et utilisez-la pour faire glisser. Alors les entrées fonctionnent bien.

<li><span class="move">Move</span><input...../></li>

    $("#sortableList").sortable({

    handle: ".move"

    });

la solution de Throttlehead a fonctionné pour moi. Plus simple peut-être d'utiliser les sélecteurs JQuery pour couvrir toutes les entrées et textareas:

    $('input,textarea').bind('click', function(){
    $(this).focus();
});