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

J'ai une entrée de texte et un bouton (voir ci-dessous). Comment puis-je utiliser JavaScript pour déclencher l&#8217événement de clic du bouton lorsque la touche Enter est enfoncé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 veux seulement que la touche Enter clique sur ce bouton spécifique si elle est pressée à l'intérieur de cette zone de texte, rien d'autre.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Sam Axe
Question modifiée 15 janvier 2015 в 3:17
Programmation
javascript button onkeypress onclick
30 septembre 2008 в 9:32
78 vues
Solution

En jQuery, la formule suivante fonctionnerait :

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

$("#myButton").click(function() {
  alert("Button code executed.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password: <input id="pw" type="password"><br>
Submit

Ou en JavaScript pur, ce qui suit fonctionnerait :

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});
document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password: <input id="pw" type="password"><br>
Submit
Black
Réponse modifiée 4 février 2018 в 6:58
Commentaires (15)

J'ai trouvé ça :

<input type="text" id="txtSearch" onkeypress="return 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
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>
Anik Islam Abhi
Réponse modifiée 12 novembre 2015 в 4:53
Commentaires (3)

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 élément `` contenant les champs de saisie pour que cela fonctionne (merci Sergey Ilinsky).

Ce n'est pas une bonne pratique de redéfinir un comportement standard, la touche Enter devrait toujours appeler le bouton submit d'un formulaire.

icedwater
Réponse modifiée 28 décembre 2015 в 9:25
Commentaires (3)