Tengo una entrada de texto y un botón (ver abajo). ¿Cómo puedo usar JavaScript para disparar el evento de clic del botón cuando se pulsa la tecla Enter dentro del cuadro de texto?
Ya hay un botón de envío diferente en mi página actual, así que no puedo simplemente hacer que el botón sea un botón de envío. Y, yo sólo quiero que la tecla Enter haga clic en este botón específico si se presiona desde dentro de este cuadro de texto, nada más.
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
En jQuery, lo siguiente funcionaría:
$("#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>
O en JavaScript plano, lo siguiente funcionaría:
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>
Lo he averiguado:
<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>
Haz que el botón sea un elemento de envío, para que sea automático.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Ten en cuenta que necesitarás un elemento <form>
que contenga los campos de entrada para que esto funcione (gracias Sergey Ilinsky).
No es una buena práctica redefinir el comportamiento estándar, la tecla Enter siempre debe llamar al botón de envío en un formulario.