Active un clic de botón con JavaScript en la tecla Intro en un cuadro de texto
Tengo una entrada de texto y un botón (ver más abajo). ¿Cómo puedo usar JavaScript para activar el evento de clic del botón cuando Enviar se presiona la tecla dentro del cuadro de texto?
Ya existe un botón de envío diferente en mi página actual, por lo que no puedo simplemente convertir el botón en un botón de envío. Y yo , solamente quiero el Enviar para hacer 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();" />
preguntado el 30 de septiembre de 08 a las 19:09
kdenney
30 Respuestas
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 simple, 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>Respondido 04 Feb 18, 18:02
Probablemente sea una mejor práctica consultar event.which que event.keyCode o event.charCode, consulte desarrollador.mozilla.org/en/DOM/event.charCode#Notas - Guillermo Niu
keydown no keyup es el mejor evento para usar. Además, si está utilizando asp.net, tendrá que return false al final para evitar que asp.net siga interceptando el evento. - maxp
Problema con el uso keydown es que si se mantiene pulsado enter, se activará el evento una y otra vez. si te apegas a la keyup evento, solo se disparará una vez que se suelte la tecla. - steve paulo
He modificado tu código añadiendo event.preventDefault(); antes de invocar click(); función mientras mi página tiene un formulario y he cambiado keyup keypress ya que era el único controlador que funcionaba para mí, de todos modos, ¡gracias por un código tan ordenado! - Adrian K.
Para ser justos, jQuery era prácticamente sinónimo de JS cuando se publicó esta respuesta. Pero ahora, muchos de nosotros que evitamos jQuery por completo (porque es solo una pérdida de kb cuando usas algo como React) nos sentimos molestos cuando buscamos respuestas a las preguntas de JS y, a menudo, lo primero que aparece es una biblioteca que usamos. no quiero depender de. - Andy
¡Entonces codifícalo!
<input type = "text"
id = "txtSearch"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "doSomething();"
/>
Respondido el 28 de diciembre de 15 a las 09:12
Sí, casi lo hago. Supongo que es solo una cuestión de preferencia personal ... Me gusta el enfoque más modular. ;) - Kdenney
si necesita detener el envío del formulario: onkeydown = "if (event.keyCode == 13) {document.getElementById ('btnSubmit'). click (); event.returnValue = false; event.cancel = true;}" - gabriel chun
Esto funcionó para mí debido al hecho de que el método en línea, en lugar de llamar a la función con un código similar, le permite devolver falso en la llamada y evitar la devolución de datos. En mi caso, el método "click" invoca una llamada asíncrona __doPostback y sin el "return false;" simplemente recargaría la página. - David
Estoy de acuerdo con Sam, este código con este código JS en línea es feo como el infierno. Siempre debe separar los códigos HTML y JavaScript. - Sk8erPeter
@Sam Nunca obtengas tu sabiduría de títeres. El dolor conduce a miedoy el miedo es el asesino de la mente. El miedo es la pequeña muerte que conduce a la destrucción total. Me enfrentaré a mi miedo. Permitiré que pase sobre mí y a través de mí. Y cuando haya pasado, giraré el ojo interior para ver su camino. Donde el miedo se ha ido no habrá nada. Excepto tal vez controladores de eventos en línea. Entonces, sí, separe los controladores de eventos de su vista / marcado, como esta respuesta hace. ; ^) - ruffin
Descubrí esto:
<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>
respondido 12 nov., 15:04
e = e || window.event; // forma más corta de obtener el evento - Víctor
La mejor opción de JavaScript simple. JavaScript agregado como un atributo en HTML consume espacio, y jQuery es solo jQuery (la compatibilidad no está garantizada). ¡Gracias por la solución! - caja
y si devuelve falso dentro del if, puede evitar que la clave se procese más: 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; } - Jose gómez
Haga del botón un elemento de envío, para que sea automático.
<input type = "submit"
id = "btnSearch"
value = "Search"
onclick = "return doSomething();"
/>
Tenga en cuenta que necesitará un <form> elemento que contiene los campos de entrada para que esto funcione (gracias Sergey Ilinsky).
No es una buena práctica redefinir el comportamiento estándar, el Enviar La clave siempre debe llamar al botón enviar en un formulario.
Respondido el 28 de diciembre de 15 a las 09:12
¡Chicos! Lea toda su pregunta. Ya hay otro botón de envío en la página, por lo que esto no funcionaría para él. - cielobondsor
Dato curioso, recientemente intenté hacer esto en SharePoint. Sin embargo, SharePoint ya tiene un formulario que envuelve todo su contenido y cualquier <form> Las etiquetas son descartadas por el analizador HTML que de otro modo sería liberal. Así que tengo que secuestrar las pulsaciones de teclas o romper. (Por cierto, al presionar Enter en SharePoint se inicia el modo de edición por alguna razón. Supongo que la cinta está usando el mismo formulario). - user1499731
A <button type="submit" onclick="return doSomething(this)">Value</button> trabaja para. La pista se encuentra dentro del return palabra clave - Gus
@skybondsor - OTOH, como lo menciona garrow, OP fue incorrecto cuando afirmó esa limitación. Es completamente posible tener múltiples formularios en una página: solo necesita envolver el elemento dentro de su propio formulario y asegurarse de que sea no en el interior el otro formulario en la página. - Fabricante de herramientasSteve
@ToolmakerSteve ¡Por supuesto! Pero ambos podemos estar de acuerdo en que, a partir de la pregunta original, no estaba claro si existían múltiples formas. Otra buena razón para publicar tanto código como sea posible. - cielobondsor
Dado que nadie ha usado addEventListener sin embargo, aquí está mi versión. Dados los elementos:
<input type = "text" id = "txt" />
<input type = "button" id = "go" />
Yo usaría lo siguiente:
var go = document.getElementById("go");
var txt = document.getElementById("txt");
txt.addEventListener("keypress", function(event) {
event.preventDefault();
if (event.keyCode == 13)
go.click();
});
Esto le permite cambiar el tipo de evento y la acción por separado mientras mantiene limpio el HTML.
Nota que probablemente valga la pena asegurarse de que esto esté fuera de un
<form>porque cuando incluí estos elementos en ellos presionando Enter, envié el formulario y recargué la página. Me tomó unos parpadeos descubrirlo.Apéndice: Gracias a un comentario de @ruffin, agregué el controlador de eventos que faltaba y un
preventDefaultpara permitir que este código (presumiblemente) funcione también dentro de un formulario. (Probaré esto, momento en el que eliminaré el contenido entre corchetes).
Respondido el 20 de junio de 20 a las 10:06
Realmente no entiendo por qué la respuesta de JQeuery tiene más votos a favor. Lloro por la comunidad de desarrollo web. - David
Todo lo que realmente te falta es un argumento en tu controlador de pulsaciones de teclas y un e.preventDefault() para que funcione con formularios. Ver mi (nueva) respuesta. - ruffin
a menos que no pretenda que sus usuarios ingresen ningún dato, realmente debería hacer algo como if (event.keyCode == 13) { event.preventDefault(); go.click();} - desincronizado
Usar jQuery solo para esta pequeña cosa es inútil. También funciona con mucha facilidad con CSP y tarda menos en cargarse. Si puede, use esto. - avamander
En JavaScript simple,
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;
}
};
Noté que la respuesta se da solo en jQuery, así que pensé en dar algo en JavaScript simple también.
contestado el 09 de mayo de 13 a las 11:05
document.layers? ¿Sigues apoyando a Netscape? !! - Víctor
No, no es necesario que sea compatible con Netscape. blog.netscape.com/2007/12/28/… - reydango
netscape.com ni siquiera existe (redirige a aol.com) y, sin embargo, todavía hay personas que apoyan a nescape, increíble. - APRENDIZAJES
evt.which ? evt.which : evt.keyCode es igual a evt.which || evt.keyCode - usuario
@LeartS Apuesto a que es porque todavía hay gente usando Netscape. - santibailors
Un truco básico que puedes usar para esto que no he visto completamente mencionado. Si desea realizar una acción ajax, o algún otro trabajo en Enter, pero no desea enviar un formulario, puede hacer esto:
<form onsubmit="Search();" action="javascript:void(0);">
<input type="text" id="searchCriteria" placeholder="Search Criteria"/>
<input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>
Configurando action = "javascript: void (0);" como este es un atajo para prevenir el comportamiento predeterminado esencialmente. En este caso, se llama a un método ya sea que presione enter o haga clic en el botón y se realiza una llamada ajax para cargar algunos datos.
Respondido el 12 de Septiembre de 13 a las 20:09
Esta es una mejor solución para la compatibilidad con dispositivos móviles. Oculta automáticamente el teclado en dispositivos Android, y también iOS si agrega searchCriteria.blur(); En el correo electrónico “Su Cuenta de Usuario en su Nuevo Sistema XNUMXCX”. onsubmit. - Aarón Gillion
Esto no funcionará porque ya hay otro botón de envío en la página. - Jose gómez
@ JoseGómez, una página puede tener tantos botones de envío como desee el desarrollador, activándose solo por sus campos correspondientes. Solo se necesita tener formularios distintos para cada grupo de campos / envío. Una página no se limita a un solo formulario. - Frédéric
@Frederic: de la pregunta yo (¿mal?) Entendí que el otro botón de envío estaba en la misma forma: "Ya existe un botón de envío diferente en mi página actual, por lo que no puedo simplemente convertir el botón en un botón de envío". - Jose gómez
Esta es una gran respuesta ya que permite acciones personalizadas pero evita la necesidad de un montón de código de anulación elegante. - mejor
Pruébalo
<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>
<script>
window.onload = function() {
document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
if (event.keyCode == 13) {
document.getElementById('btnSearch').click();
}
};
document.getElementById('btnSearch').onclick =doSomething;
}
</script>
respondido 02 mar '15, 08:03
Para desencadenar una búsqueda cada vez que se presiona la tecla Intro, use esto:
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#btnSearch').click();
}
}
Respondido el 29 de diciembre de 11 a las 18:12
onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"
Esto es solo algo que tengo de un proyecto algo reciente ... Lo encontré en la red, y no tengo idea de si hay una forma mejor o no en el viejo JavaScript.
Respondido el 29 de diciembre de 11 a las 18:12
Utilice la herramienta keypress e event.key === "Enter" con JS moderno!
const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
Respondido el 20 de junio de 20 a las 10:06
Sin embargo, estoy bastante seguro de que siempre que haya solo un campo en el formulario y un botón de envío, al presionar Intro se debe enviar el formulario, incluso si hay otro formulario en la página.
Luego puede capturar el formulario onsubmit con js y hacer cualquier validación o devolución de llamada que desee.
Respondido 01 Oct 08, 10:10
Esta es una solución para todos los YUI amantes por ahí:
Y.on('keydown', function() {
if(event.keyCode == 13){
Y.one("#id_of_button").simulate("click");
}
}, '#id_of_textbox');
En este caso especial, obtuve mejores resultados usando YUI para activar objetos DOM que han sido inyectados con funcionalidad de botón, pero esta es otra historia ...
Respondido 29 ago 13, 15:08
In Angular2:
(keyup.enter)="doSomething()"
Si no desea comentarios visuales en el botón, es un buen diseño no hacer referencia al botón, sino invocar directamente el controlador.
Además, la identificación no es necesaria, otra forma NG2 de separar entre la vista y el modelo.
Respondido 22 ago 15, 12:08
Aquí hay una pregunta sobre más información sobre las opciones de activación de teclas: stackoverflow.com/q/32155887/435605 - AlikElzin-kilaka
Nadie notó el atributo html "accesskey" que está disponible desde hace un tiempo.
Esta es una forma sin javascript de atajos de teclado para cosas.
La clave de acceso atribuye atajos en MDN
Destinado a ser utilizado así. El atributo html en sí es suficiente, sin embargo, podemos cambiar el marcador de posición u otro indicador según el navegador y el sistema operativo. El guión es un enfoque desde cero no probado para dar una idea. Es posible que desee utilizar un detector de biblioteca de navegador como el pequeño Bowser
let client = navigator.userAgent.toLowerCase(),
isLinux = client.indexOf("linux") > -1,
isWin = client.indexOf("windows") > -1,
isMac = client.indexOf("apple") > -1,
isFirefox = client.indexOf("firefox") > -1,
isWebkit = client.indexOf("webkit") > -1,
isOpera = client.indexOf("opera") > -1,
input = document.getElementById('guestInput');
if(isFirefox) {
input.setAttribute("placeholder", "ALT+SHIFT+Z");
} else if (isWin) {
input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>Respondido el 30 de enero de 20 a las 12:01
No parece responder a la pregunta del OP sobre el caso especial de key = ENTER - Ozan Bellik
Esta respuesta malinterpreta llave de acceso, que es una forma de tener una clave enfocarte en un elemento: después de presionar la tecla de acceso al área de texto, se puede comenzar a escribir en él. OP está pidiendo algo bastante diferente: una forma de enviar el contenido del elemento actual. - Fabricante de herramientasSteve
Esto en caso de que también desee activar el botón Intro de Publicar al servidor y ejecutar el script Js.
<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
{document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Respondido 02 Abr '15, 10:04
Esta en el cambio El intento está cerca, pero se comporta mal con respecto al navegador en adelante (en Safari 4.0.5 y Firefox 3.6.3), por lo que en última instancia, no lo recomendaría.
<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
Respondido el 20 de enero de 12 a las 00:01
También conviene mencionar que se desencadena al desenfocar. - FluorescenteVerde5
event.returnValue = false
Úselo cuando maneje el evento o en la función que llama su controlador de eventos.
Funciona en Internet Explorer y Opera al menos.
contestado el 26 de mayo de 11 a las 21:05
Para agregar una solución de JavaScript completamente simple que abordara Problema de @ icedwater con el envío del formulario, aquí tienes una solución completa form.
NOTA: Esto es para "navegadores modernos", incluido IE9 +. La versión IE8 no es mucho más complicada y puede ser aprendido aquí.
Violín: https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
<body>
<form>
<input type="text" id="txt" />
<input type="button" id="go" value="Click Me!" />
<div id="outige"></div>
</form>
</body>
JavaScript
// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
var go = document.getElementById("go"),
txt = document.getElementById("txt"),
outige = document.getElementById("outige");
// Note that jQuery handles "empty" selections "for free".
// Since we're plain JavaScripting it, we need to make sure this DOM exists first.
if (txt && go) {
txt.addEventListener("keypress", function (e) {
if (event.keyCode === 13) {
go.click();
e.preventDefault(); // <<< Most important missing piece from icedwater
}
});
go.addEventListener("click", function () {
if (outige) {
outige.innerHTML += "Clicked!<br />";
}
});
}
});
Respondido el 20 de junio de 20 a las 10:06
En moderno, sin prejuicios (sin keyCode or onkeydown) JavaScript:
<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">
Respondido el 29 de enero de 19 a las 14:01
En mi opinión, esta es la respuesta más simple que funciona. En mi caso de uso, lo actualicé a onkeypress = "inputKeyPressed (evento)" y luego manejé el parámetro event.which en la función misma. Enter, por ejemplo, devuelve el evento, que es 13. - ak93
Para jQuery mobile, tuve que hacer:
$('#id_of_textbox').live("keyup", function(event) {
if(event.keyCode == '13'){
$('#id_of_button').click();
}
});
Respondido 02 ago 20, 22:08
.live está en desuso en jQuery 1.7. ¿Todavía se considera correcto en jQuery Mobile? - senos
Para aquellos a los que les guste la brevedad y el enfoque js moderno.
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
donde aportes es una variable que contiene su elemento de entrada.
Respondido el 28 de enero de 18 a las 15:01
document.onkeypress = function (e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode == 13) {
// Do something here
printResult();
}
};
Aquí están mis dos centavos. Estoy trabajando en una aplicación para Windows 8 y quiero que el botón registre un evento de clic cuando presiono el botón Enter. Estoy haciendo esto en JS. Probé un par de sugerencias, pero tuve problemas. Esto funciona bien.
contestado el 19 de mayo de 14 a las 13:05
Una especie de exageración para colocar el controlador de eventos en el documento. Si tuvieras un charCode de 13 en cualquier otro lugar, estás disparando printResult(). - ruffin
Para hacerlo con jQuery:
$("#txtSearch").on("keyup", function (event) {
if (event.keyCode==13) {
$("#btnSearch").get(0).click();
}
});
Para hacerlo con JavaScript normal:
document.getElementById("txtSearch").addEventListener("keyup", function (event) {
if (event.keyCode==13) {
document.getElementById("#btnSearch").click();
}
});
Respondido 01 Oct 15, 07:10
Para JS moderno keyCode está en desuso, use key
searchInput.onkeyup = function (e) {
if (e.key === 'Enter') {
searchBtn.click();
}
}
Respondido el 04 de junio de 20 a las 09:06
JS puro de trabajo corto
txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1
txtSearch.onkeydown= e => (e.key=="Enter") ? btnSearch.click() : 1
function doSomething() {
console.log('💩');
}<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />Respondido el 25 de junio de 20 a las 15:06
En jQuery, puede usar event.which==13. Si tienes un form, podrías usar $('#formid').submit() (con los oyentes de eventos correctos agregados al envío de dicho formulario).
$('#textfield').keyup(function(event){
if(event.which==13){
$('#submit').click();
}
});
$('#submit').click(function(e){
if($('#textfield').val().trim().length){
alert("Submitted!");
} else {
alert("Field can not be empty!");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>Respondido 09 Jul 18, 23:07
Desarrollé javascript personalizado para lograr esta característica con solo agregar una clase
Ejemplo: <button type="button" class="ctrl-p">Custom Print</button>
Aquí Compruébalo Violín
- o -
echa un vistazo al ejemplo de ejecución
https://stackoverflow.com/a/58010042/6631280
Nota: en la lógica actual, debe presionar Ctrl + Enviar
Respondido el 03 de diciembre de 19 a las 12:12
Estos dias el change ¡El evento es el camino!
document.getElementById("txtSearch").addEventListener('change',
() => document.getElementById("btnSearch").click()
);
Respondido 17 ago 20, 08:08
Los eventos de cambio se activan cuando el usuario confirma un cambio de valor en un control de formulario. Esto se puede hacer, por ejemplo, haciendo clic fuera del control o usando la tecla Tab para cambiar a un control diferente. DND Creo que mucha gente no quisiera quiero este comportamiento ... - mateomaster58
Esto también podría ayudar, una pequeña función de JavaScript, que funciona bien:
<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }
function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script>
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />
Sé que esta pregunta está resuelta, pero acabo de encontrar algo que puede ser útil para otros.
Respondido el 13 de Septiembre de 11 a las 11:09
La pregunta era activar un clic en un botón con la tecla Intro en un cuadro de texto. Su solución es para un tipo de funcionalidad de "marca de agua". - Kdenney
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript htmlbutton or haz tu propia pregunta.
Nota importante para novatos como yo: la parte clave de esta pregunta es si ya tiene un formulario en la página, por lo que ya tiene un botón de envío. La respuesta de jQuery es compatible con varios navegadores y es una buena solución. - Joshua Dance
@JoshuaDance, tener un formulario / enviar no es un problema. Una página puede tener muchos formularios (pero no anidados), cada uno con su propio envío. Cada campo de cada formulario activará solo el envío de ese formulario. Según lo declarado por esta respuesta. - Frédéric