Déclencher un clic de bouton avec JavaScript sur la touche Entrée dans une zone de texte

Question

J'ai une entrée de texte et un bouton (voir ci-dessous). Comment puis-je utiliser JavaScript pour déclencher l'événement de clic du bouton lorsque le Enter est pressée dans la zone de texte ?

Il existe déjà un autre bouton d'envoi sur ma page actuelle, je ne peux donc pas simplement faire de ce bouton un bouton d'envoi. De plus, je uniquement veulent le Enter pour cliquer sur ce bouton spécifique s'il est pressé à partir de cette zone de texte, rien d'autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Mise à jour : Accepter sa propre réponse est maintenant autorisé, mais la solution jQuery est probablement meilleure. Si vous n'avez pas accès à jQuery pour une raison quelconque, voyez ma propre réponse ci-dessous.

Answer 1

En jQuery, cela fonctionnerait :

$("#id_of_textbox").keyup(function(event){
    if(event.keyCode == 13){
        $("#id_of_button").click();
    }
});

Désolé, je ne sais pas comment le faire en JavaScript, mais peut-être que quelqu'un d'autre pourrait extrapoler cela ?

P.S. : utilisez jQuery ;)

Answer 2

Il suffit ensuite de le coder !

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13) document.getElementById('btnSearch').click()"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 3

J'ai trouvé ça :

    <input type="text" id="txtSearch" onkeypress="searchKeyPress(event);" />
    <input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

    <script>
    function searchKeyPress(e)
    {
        // look for window.event in case event isn't passed in
        if (typeof e == 'undefined' && window.event) { e = window.event; }
        if (e.keyCode == 13)
        {
            document.getElementById('btnSearch').click();
        }
    }
    </script>

Answer 4

Faites en sorte que le bouton soit un élément d'envoi, pour que ce soit automatique.

<input type="submit" id="btnSearch" value="Search" onclick="return doSomething();" />

Notez que vous aurez besoin d'un <form> contenant les champs de saisie pour que cela fonctionne (merci Sergey Ilinsky).

Ce n'est pas une bonne pratique que de redéfinir un comportement standard, les Enter doit toujours appeler le bouton "submit" d'un formulaire.

Answer 5

En simple JavaScript,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

J'ai remarqué que la réponse n'est donnée qu'en jQuery, j'ai donc pensé à donner quelque chose en simple JavaScript également.