web-dev-qa-db-fra.com

jQuery: événement keyup pour appareil mobile

Je rencontre quelques problèmes lors du déclenchement d'un événement keyup sur mon iPhone. Mon code est le suivant:

        var passwordArray = ["Word", "test", "hello", "another", "here"];

        var test = document.getElementById('enter-password');
        test.addEventListener('keyup', function(e) {

            if (jQuery.inArray(this.value, passwordArray) != -1) {
                alert("THIS IS WORKING");
            } else {}

        });

L'idée étant que lorsque l'utilisateur tape dans le champ #enter-password, au fur et à mesure qu'il correspond à un mot dans la variable passwordArray, l'alerte se déclenche. Cela fonctionne sur le bureau, par exemple. une fois que vous avez entré Word, la fonction est immédiatement activée dès que vous avez saisi d. Y a-t-il un moyen de faire en sorte que cela fonctionne aussi pour le mobile?

javascriptjquerymobileclickkeyup
8
user1374796

Vous pouvez ajouter un événement d'entrée. C'est un événement qui se déclenche chaque fois que l'entrée change. L'entrée fonctionne aussi bien sur le bureau que sur les téléphones mobiles

test.on('keyup input', function(){
  //code
});

Vous pouvez vérifier cette réponse pour plus de détails sur jQuery Input Event

19
Joyson

Vous pouvez utiliser trois événements (mais vous devez faire attention à la façon dont vous les "combinez"):

  • keyup: cela fonctionne sur les appareils avec un clavier, il se déclenche lorsque vous relâchez une touche (n'importe quelle touche, même les touches ne montrant rien à l'écran, comme ALT ou CTRL);

  • touchend: cela fonctionne sur les appareils à écran tactile, il se déclenche lorsque vous retirez votre doigt/stylo de l'écran.

  • input: il est déclenché lorsque vous appuyez sur une touche "et l'entrée change" (si vous appuyez sur des touches telles que ALT ou CTRL, cet événement n'est pas déclenché).

L'événement input fonctionne sur les périphériques à clavier et avec les périphériques à écran tactile. Il est important de le signaler car, dans la réponse acceptée, l'exemple est correct mais approximatif:

test.on('keyup input', function(){
}

Sur les périphériques basés sur keyboard, cette fonction est appelée deux fois, car les événements keyup et input sont déclenchés.

La bonne réponse devrait être:

test.on('keyup touchend', function(){
}

(la fonction est appelée sur keyup pour les ordinateurs de bureau/portables OR sur touchend pour les mobiles)

ou vous pouvez simplement utiliser 

test.on('input', function(){
}

mais rappelez-vous que l'événement input ne sera pas déclenché par toutes les touches (CTRL, ALT & co. ne déclenchera pas l'événement).

6
Frank

L'événement touchend est déclenché lorsqu'un point de contact est supprimé de l'appareil.

https://developer.mozilla.org/en-US/docs/Web/Events/touchend

Vous pouvez passer des événements keyup et touchend dans la méthode jQuery .on () (au lieu de la méthode keyup ()) pour déclencher votre code sur ces deux événements.

test.on('keyup touchend', function(){
//code
});
1
user5116395

Vous devriez ajouter un événement d'entrée. Cela fonctionne à la fois sur les appareils mobiles et informatiques. 

0
user10643043