Estoy tratando de establecer un script simple donde, cada vez que se enfoca en una entrada y presiona Entrar, sucede algo. Al igual que en esos cuadros de búsqueda en páginas web y foros.
El problema es que no puedo hacer que la función se detenga después de que el usuario haga clic en un lugar diferente. Intenté agregar desenfoque y no ayuda, obtengo un
"Error de referencia no capturado: pressEnter no está definido en HTMLInputElement".
También traté de configurar la función como una individual y llamarla más tarde en el eventlistener PERO no puedo pasar el argumento del evento para que esa función funcione (acabo de comenzar a estudiar EventListeners, así que, por favor, tómatelo con calma)
Agradecería cualquier ayuda sobre cómo hacer referencia correctamente a la función pressEnter o cualquier solución diferente.
inputTest = document.querySelector("#test") inputTest.addEventListener("focus", function pressEnter() { window.addEventListener("keyup", (e) => { if (e.key === "Enter") { console.log("Pressed") } }) }) inputTest.addEventListener("blur", () => { window.removeEventListener("keyup", pressEnter()) console.log("Done(?)") } ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Events</title> </head> <body> <input type="text" id="test"> <script src="script.js"></script> </body> </html>No necesita una "arquitectura" tan complicada para lograr esa funcionalidad, solo necesita agregar el detector de eventos keyup directamente al elemento de input , así:
const inputTest = document.querySelector("#test") inputTest.addEventListener("keyup", (e) => { if (e.key === "Enter") { console.log("Pressed") } }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Events</title> </head> <body> <input type="text" id="test"> <script src="script.js"></script> </body> </html>Según lo que intente hacer, podría reemplazar su detector de eventos con una etiqueta de formulario. Si está intentando implementar algo como una barra de búsqueda, esto podría ser semánticamente correcto. A ver si esto te funciona:
const handleSubmit = () => { const input = document.querySelector("#test"); const inputValue = input.value; console.log(inputValue); // You can handle any logic here return false; }; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Events</title> </head> <body> <form name="eventForm" onsubmit="handleSubmit()" action="#"> <input type="text" id="test" /> </form> <script src="script.js"></script> </body> </html>Los cuadros de búsqueda en páginas web y foros simplemente detectan una clave en el DOM actual. como el siguiente.
// EnterkeyListener document.addEventListener('keyup' , function(e){ if (e.key == "Enter") { const searchValue = document.querySelector("#test").value; console.log(searchValue); }; });y si realmente desea que no suceda nada cuando la barra de búsqueda está vacía, puede usar una declaración if como
// EnterkeyListener document.addEventListener('keyup' , function(e){ if (e.key == "Enter") { const searchValue = document.querySelector("#test").value; // check if searchbar has any value if so then run this code if (searchValue) { console.log("I have a value") console.log(searchValue); } else { //if not then run this code console.log("i don not have a value"); console.log(searchValue); }; }; });