731

Je voudrais détecter si l'utilisateur a appuyé Entersur jQuery.

Comment est-ce possible? Faut-il un plugin?

EDIT: Il semble que je doive utiliser la keypress()méthode.

Je voulais savoir si quelqu'un savait s'il y avait des problèmes de navigateur avec cette commande - comme y a-t-il des problèmes de compatibilité de navigateur que je devrais connaître?

— chris
source

lien à ce sujet .keypress () | Documentation de l'API jQuery

— Haim Evgi

5

L'une des meilleures choses dans les frameworks Javascript est qu'ils devraient être compatibles par défaut entre plusieurs navigateurs. Ils gèrent les vérifications de compatibilité du navigateur afin que l'utilisateur n'ait pas à le faire. Je n'ai pas lu le code source de JQuery mais je doute que la fonctionnalité de pression de touche soit différente dans ce sens.

— miek

2

le seul problème de compatibilité du navigateur est que vous devez utiliser e.which au lieu de e.keyCode pour détecter le code ascii.

— Daniel

1

stackoverflow.com/questions/302122/…

— Lemo

1330

L'intérêt de jQuery est que vous n'avez pas à vous soucier des différences de navigateur. Je suis sûr que vous pouvez en toute sécurité enterêtre 13 dans tous les navigateurs. Donc, avec cela à l'esprit, vous pouvez le faire:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

— Paolo Bergantino
source

7

Je fais un lien vers cela parce que j'ai lu cela et je me suis gratté la tête pour savoir pourquoi la touche ne fonctionnait pas avec IE. (il ne se liera pas $(window)sous IE) quirksmode.org/dom/events/keys.html

— Incognito

17

e.keyCode n'est pas 100% cross browser. utilisez e.which à la place comme indiqué ci-dessous

— Daniel

15

De la documentation jQuery "La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie des touches du clavier."

— Riccardo Galli

20

$ (document) .on ('keypress', fonction (e) {

— user956584

5

Je reçois plusieurs exécutions de la fonction donnée en raison de la propagation des événements (c'est-à-dire que l'alerte est lancée deux fois). Pour arrêter cela, ajoutez une e.stopPropagation () à la fin de la fonction

— dpb

129

J'ai écrit un petit plugin pour faciliter la liaison d'un événement "à la touche entrée enfoncée":

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

Usage:

$("#input").enterKey(function () {
    alert('Enter!');
})

— Andrea
source

Cela ne fonctionne pas pour moi (je suis #inputsur le <input>terrain)

— Rápli András

1

Qu'en est-il si l'élément #input sera dynamique?

— Jigar7521

@mplungjan ne sais pas ce que vous entendez par «déléguer»

— Andrea

$("#input").on("someevent","someselector",function () {})

— mplungjan

62

Je n'ai pas pu faire fonctionner le code posté par @Paolo Bergantino mais quand je l'ai changé $(document)et e.whichau lieu de cela, e.keyCodeje l'ai trouvé fonctionner sans problème.

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

Lien vers l'exemple sur JS Bin

— Ian Roke
source

Pour moi, e.which ne fonctionne pas avec IE. Ça marche pour les autres?

— Umesh Rajbhandari

Quelle version d'IE? Fonctionne très bien pour moi sur IE7.

— Ian Roke

De la documentation jQuery "La propriété event.which normalise event.keyCode et event.charCode. Il est recommandé de regarder event.which pour la saisie des touches du clavier."

— Riccardo Galli

52

J'ai trouvé que c'était plus compatible avec tous les navigateurs:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});

— jesal
source

1

Votre IF ternaire peut être raccourci en: var keycode = event.keyCode || event.which;

— pistol-pete

29

Vous pouvez le faire en utilisant le descripteur d'événement jquery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });

— Nasruddin
source

11

Utilisez `event.key`et JS moderne!

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

ou sans jQuery:

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Documents Mozilla

Navigateurs pris en charge

— Gibolt
source

9

J'ai passé quelque temps à trouver cette solution, j'espère qu'elle aide quelqu'un.

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});

— Samuel Kwame Antwi
source

8

Il existe une méthode d'événement keypress () . Le numéro ascii de la touche Entrée est 13 et ne dépend pas du navigateur utilisé.

— Richard Simões
source

7

Une extension mineure de la réponse d'Andrea ci-dessus rend la méthode d'aide plus utile lorsque vous pouvez également capturer des pressions d'entrée modifiées (c'est-à-dire ctrl-enter ou shift-enter). Par exemple, cette variante permet la liaison comme:

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

pour soumettre un formulaire lorsque l'utilisateur appuie sur ctrl-entrée en mettant l'accent sur la zone de texte de ce formulaire.

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

(voir aussi Ctrl + Entrée jQuery dans TEXTAREA )

— joeln
source

4

Dans certains cas, vous devrez peut-être supprimer la ENTERclé pour une certaine zone d'une page mais pas pour d'autres zones d'une page, comme la page ci-dessous qui contient un en- tête <div> avec un champ RECHERCHE .

Il m'a fallu un peu de temps pour comprendre comment le faire, et je publie ici cet exemple simple mais complet pour la communauté.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Lien vers JSFiddle Playground : le [Submit]bouton ne fait rien, mais en appuyant ENTERsur l'un des contrôles de la zone de texte, le formulaire ne sera pas envoyé.

— jp2code
source

4

Essayez ceci pour détecter la touche Entrée enfoncée.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

Voir démo @ détecter appuyez sur la touche Entrée du clavier

— jonathan klevin
source

2

Étant donné que l' keypressévénement n'est couvert par aucune spécification officielle, le comportement réel rencontré lors de son utilisation peut différer d'un navigateur à l'autre, d'une version à l'autre et d'une plateforme à l'autre.

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>

Développer l'extrait

J'espère que ce serait utile!

— Zoe_NS
source

À noter, la raison pour laquelle keypressn'est pas dans les spécifications (plus) est qu'elle est obsolète ( MDN ).

— YellowAfterlife

donc, j'ai édité ... tnx <3

— Zoe_NS

0

Le moyen facile de détecter si l'utilisateur a appuyé sur Entrée est d'utiliser le numéro de clé, le numéro de clé d'entrée est = 13 pour vérifier la valeur de la clé dans votre appareil

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

en appuyant sur la touche Entrée, vous obtiendrez le résultat 13. en utilisant la valeur clé, vous pouvez appeler une fonction ou faire ce que vous voulez

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

si vous souhaitez cibler un bouton une fois la touche Entrée enfoncée, vous pouvez utiliser le code

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

J'espère que ça aide

— user2216399
source

0

Je pense que la méthode la plus simple serait d'utiliser du javacript vanille :

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}

— Duan Walker
source

0

$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});

— Tayfun Açıkgöz
source

3

Pourriez-vous ajouter quelques commentaires explicatifs pour expliquer au demandeur comment fonctionne votre code - merci.

— SaschaM78

0

$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});

— AzizAhmad
source

Cela ressemble à une adaptation d'autres réponses - pourriez-vous ajouter quelques explications pour rendre la vôtre aussi intéressante que les autres?

— Nico Haase

0

J'ai utilisé $(document).on("keydown").

Sur certains navigateurs keyCoden'est pas pris en charge. La même chose avec whichdonc si keyCoden'est pas pris en charge, vous devez utiliser whichet vice versa.

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Développer l'extrait

— Justin Liu
source

Comment détecter en appuyant sur Entrée sur le clavier en utilisant jQuery?

Utilisez event.keyet JS moderne!

Utilisez `event.key`et JS moderne!