Estaba creando una Lista de tareas pendientes con HTML y JavaScript y ahora quiero agregar una entrada no solo con el botón Enviar, sino también si presiono Intro en cualquier parte de la página. Principalmente quiero usar javascript solo para crear esa función, sin función "onclick" en html.
<!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" /> <link rel="stylesheet" href="style.css" /> <title>To do app</title> </head> <body> <h1>To-Do List</h1> <form> <input type="text" placeholder="Add an item!" id="inputField" /> </form> <button id="submit">Submit</button> <button id="clear">Clear List</button> <div id="output"></div> <script src="script.js"></script> </body> </html> ---------------------------------- document.getElementById("submit").addEventListener("click", function () { submitForm(); }); document.getElementById("clear").addEventListener("click", function () { document.getElementById("inputField").value = ""; document.getElementById("myOl").innerHTML = ""; }); function submitForm() { let input = document.getElementById("inputField").value; let ol = document.createElement("ol"); ol.setAttribute("id", "myOl"); document.body.appendChild(ol); let y = document.createElement("LI"); let t = document.createTextNode(`${input}`); y.appendChild(t); document.getElementById("myOl").appendChild(y); document.getElementById("inputField").value = ""; }Puede usar el listado de eventos de keypress de tecla con document.addEventListener y verificar event.key , event.keyCode y event.which combinación para verificar la tecla enter.
No olvide usar event.preventDefault() para evitar que se vuelva a cargar la página.
document.getElementById("submit").addEventListener("click", function () { submitForm(); }); document.getElementById("clear").addEventListener("click", function () { document.getElementById("inputField").value = ""; document.getElementById("myOl").innerHTML = ""; }); document.addEventListener('keypress', function (e) { const code = (e.keyCode ? e.keyCode : e.which); if (e.key === 'Enter' || code == 13) { submitForm(); e.preventDefault(); } }); function submitForm() { let input = document.getElementById("inputField").value; let ol = document.createElement("ol"); ol.setAttribute("id", "myOl"); document.body.appendChild(ol); let y = document.createElement("LI"); let t = document.createTextNode(`${input}`); y.appendChild(t); document.getElementById("myOl").appendChild(y); document.getElementById("inputField").value = ""; } <h1>To-Do List</h1> <form> <input type="text" placeholder="Add an item!" id="inputField" /> </form> <button id="submit">Submit</button> <button id="clear">Clear List</button> <div id="output"></div>Puede usar el evento clave arriba.
document.addEventListener('keyup', keypress); function keypress(e){ e.preventDefault() if (e.key === 'Enter' || e.keyCode === 13) { submitForm(); } }se agregó e.preventDefault() para evitar el envío de formularios
https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event