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?

jQuerybeast
la source

Réponses:

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


//keyup not compatible with Jquery select(), Keydown is.
Joseph Silber
la source
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

Gibolt
la source
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

wesbos
la source
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
    }
 });

});
ShankarSangoli
la source
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>
Indra Kumar S
la source
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;
    }
});
Roy Shoa
la source
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
    }
});
Jorge Santos Neill
la source
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

jonathan klevin
la source
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
la source
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;
 }
});
Umar Niazi
la source