web-dev-qa-db-fra.com

JQuery: Keyup, comment puis-je empêcher le comportement par défaut de la flèche (haut et bas) et entrer clé?

JavaScript (JQuery) 

$('input').keyup(function(e)
{
    var code = e.keyCode ? e.keyCode : e.which;

    switch(code)
    {
        case 38:
        break;

        case 40:
        break;

        case 13:
        break;

        default:
        return;
     }
 });

HTML

<form method="post" action="/">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>

J'ai 2 problèmes:

1) Le curseur ne doit pas bouger lorsque je frappe les touches en haut les flèches.

Par exemple, dans Chrome, lorsque je tape sur la touche du haut, le curseur se déplace vers la gauche. Mais je n'ai que ce problème dans Chrome. Cela fonctionne bien en FF.

2) Quand je tape la touche enter , je ne veux pas que le formulaire soit soumis.

BTW, je veux que cela fonctionne avec keyup et non keypress .

J'apprécierais toutes les idées. Merci.

javascriptjqueryonkeyupenter
14
user317005

Je ne pense pas que vous puissiez preventDefault() (ce que vous devez utiliser pour empêcher le navigateur de réaliser l'action par défaut pour une clé) sur l'événement keyup- il est déclenché après l'événement par défaut est déjà survenu. Voir cette page pour plus.

Si vous le pouvez, envisagez plutôt d'utiliser keydownname__.

En ce qui concerne l’arrêt du formulaire, vous pouvez créer un lien vers l’événement submitNAME_ et return false; lorsque la soumission n’a pas été déclenchée par le bouton de soumission (voir jQuery: comment obtenir le bouton sur lequel on a cliqué formulaire de soumission? pour savoir comment déterminer cela).

D'autre part, vous pouvez également vous lier à keypresspour le formulaire et quand. Enter est pressé, annuler la soumission de la même manière (code non testé):

$('form').keypress(function(e){
    if(e.which === 13){
        return false;
    }
});
47
no.good.at.coding

Au lieu de break, vous pouvez essayer de renvoyer false ou lui demander d'appeler une fonction et d'utiliser http://api.jquery.com/event.preventDefault/

Par exemple: case 40: function(e) {e.preventDefault;}

De plus, $('form').submit(function() {return false}); arrêterait complètement les envois, mais je ne suis pas sûr que ce soit ce que vous cherchez?

0
thugsb

Pour éviter que le formulaire ne soit soumis lorsque l'utilisateur appuie sur Entrée, vous devez lier la fonction d'envoi de votre formulaire et renvoyer la valeur false si le déclencheur de l'événement était le bouton Entrée en cours d'utilisation.

pour appuyer sur le bouton Haut/Bas, utilisez e.preventDefault();

0
devmatt

Il semble que vous puissiez réellement arrêter la valeur par défaut pour 'ENTER' tout en utilisant keyup (); ... jQuery api écrit à ce sujet eux-mêmes ici: http://api.jquery.com/keyup/

Voici comment vous devez faire: 

$('textarea').keyup(function(e) {
   // your code here
}).keydown(function(e){
   // your e.which for ENTER.
});
0
skolind

La méthode la plus fiable est une combinaison de e.preventDefault(), e.stopPropagation() et return false;

Voici à quoi cela pourrait ressembler:

var override_keys = [13, 38, 40];

$('input').keyup(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

De plus, pour éviter que le formulaire ne soit soumis avec la touche Entrée, vérifiez l’événement submit du formulaire:

$('#form').submit(function(e){
  var code = e.keyCode ? e.keyCode : e.which;

  if ($.inArray(code, override_keys)) {
    return false;
  }
});
0
Alex Weber