Necesito ejecutar un código después de que el usuario elija los datos y el año del elemento de entrada de mi página HTML
Aquí está mi código JavaScript
var key_form = document.getElementById("key-form"); key_form.addEventListener("input", function () { setTimeout(function(){let key = key_form.value; alert(key);}, 4000) })Aquí está el HTML
<!DOCTYPE html> <html lang="en-US"> <head> <title>Starter Template</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="src/script.js" defer></script> <link rel="stylesheet" href="src/styles.css"/> </head> <body> <label for="key-form">Pick date for key: </label> <input type="date" id="key-form"/> <label for="word">Word to encrypt: </label> <input type="text" id="word"/> </body> </html>¿Hay una mejor manera de hacer esto?
EDITAR:
No quiero que tenga un límite estricto de 4 segundos y luego ejecute el código que tiene. Quiero que solo ejecute la función cuando el usuario haya terminado de dar su entrada.
PD, lo siento si la pregunta no fue clara
Entonces, la pregunta es: ¿Cómo sabe "cuando el usuario termina de dar su entrada" ?
¿Quizás su formulario tiene un botón de envío en el que el usuario debe hacer clic?
const key_form = document.getElementById("key-form"); const submit_button = document.getElementById("submit-button"); submit_button.addEventListener("click", function () { let key = key_form.value; alert(key); }) <label for="key-form">Pick date for key: </label> <input type="date" id="key-form"/> <label for="word">Word to encrypt: </label> <input type="text" id="word"/> <button id="submit-button">Encrypt word!</button>¿O tal vez cuando el foco ya no esté en el campo de fecha?
(el evento de blur se activa cuando hace clic fuera del campo o presiona el tabulador cuando el campo tiene el foco)
const key_form = document.getElementById("key-form"); key_form.addEventListener("blur", function () { let key = key_form.value; alert(key); }) <label for="key-form">Pick date for key: </label> <input type="date" id="key-form"/> <label for="word">Word to encrypt: </label> <input type="text" id="word"/>También hay otras formas. Se activan muchos eventos a medida que se completan los campos del formulario, y todos pueden desencadenar cualquier lógica que desee. Por lo tanto, piense en cómo desea que el usuario interactúe con este formulario y luego encuentre los eventos adecuados para respaldarlo.