Détecter la touche Entrée dans un champ de saisie de texte


299

J'essaye de faire une fonction si enter est pressé pendant une entrée spécifique.

Qu'est-ce que je fais mal?

$(document).keyup(function (e) {
    if ($(".input1").is(":focus") && (e.keyCode == 13)) {
        // Do something
    }
});

Y a-t-il une meilleure façon de le faire qui dirait, si enter appuyé sur .input1do fonctionne?


Réponses:


499
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.

Dans quel navigateur le testiez-vous? Je pense que les anciennes versions d'IE ne déclenchent pas d'événements de keyup sur le document (pas sûr cependant).
Joseph Silber

2
Votre code ne fonctionnait pas car vous utilisiez .is () et aviez besoin de === plutôt que ==. Voir ma réponse pour plus de détails.
wesbos

6
@jQuerybeast Ce n'est pas nécessaire , et event.keyCodec'est un Number, donc JavaScript suivra les mêmes étapes avec ==ou ===.
alex

7
e.qui est déclaré comme étant des navigateurs croisés plus utiles
mohammad eslahi sani

2
Propriétés which, code, charCodeet keyCodeest désapprouvées developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , s'il vous plaît ajouter des informations réelles à votre réponse.
Sasay

120

event.key === "Entrée"

Plus récent et beaucoup plus propre: utilisation event.key. Plus de codes numériques arbitraires!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Si vous devez utiliser jQuery:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Documents Mozilla

Navigateurs pris en charge


6
bravo pour la version javascript, je ne sais pas pourquoi tous les autres sont en jquery
Captain Fantastic

7
Parce que, l'OP a mis son exemple de code dans jQuery et (ainsi que JavaScript) jQuery est balisé.
Tigerrrrr

44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Ou tout simplement se lier à l'entrée elle-même

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Pour déterminer le code clé dont vous avez besoin, utilisez le site Web http://keycode.info


Je vous remercie. J'ai appris quelque chose de nouveau. Au fait, j'ai utilisé .is () BEAUCOUP de fois donc ce n'est pas logique, de ne pas fonctionner. Aussi le ==, encore une fois j'ai utilisé deux == pour d'autres situations
jQuerybeast

np, vous devriez toujours utiliser ===
wesbos

12

Essayez ceci pour détecter la Entertouche enfoncée dans une zone de texte.

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});

6

Il est peut-être trop tard pour répondre à cette question. Mais le code suivant empêche simplement la touche Entrée. Le copier-coller devrait fonctionner.

        <script type="text/javascript"> 
        function stopRKey(evt) { 
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  {return false;} 
        } 

        document.onkeypress = stopRKey; 

        </script>

6

La meilleure façon que j'ai trouvée est d'utiliser keydown( keyupcela ne fonctionne pas bien pour moi).

Remarque: J'ai également désactivé le formulaire de soumission, car généralement lorsque vous aimez effectuer certaines actions lorsque vous appuyez sur la touche Entrée, la seule chose que vous n'aimez pas est de soumettre le formulaire :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCode est obsolète event.which ce n'est pas le cas, donc c'est mieux
Alex

3

La solution qui fonctionne pour moi est la suivante

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});

1

Essayez ceci pour détecter la touche Entrée enfoncée dans une zone de texte.

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO


0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });

0

Ce code a géré chaque entrée pour moi dans l'ensemble du site. Il vérifie la clé d'entrée dans un champ INPUT et ne s'arrête pas sur TEXTAREA ou d'autres endroits.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.