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 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();" />
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>
<button id="myButton">Submit</button>
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>
<button id="myButton" onclick="buttonCode()">Submit</button>
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>
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 <form>
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.