Estoy trabajando para hacer esta aplicación ToDo. Puedo agregar tareas haciendo clic en el botón Agregar, pero no puedo averiguar cómo hacerlo también para que las tareas se puedan agregar usando el botón Intro del teclado.
function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span);Puede llamar a la función en el evento keydown comprobando el valor KeyboardEvent.code :
Manifestación:
document.getElementById("myInput").addEventListener("keydown", function(event) { if(event.code == "Enter"){ newElement() } }, true); function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); } <input id="myInput"/> <ul id="myUL"></ul>Coloque los elementos dentro de un <form> y vincúlelos al evento de envío . Tanto al hacer clic en un botón de envío como al pulsar Enter en un campo de texto, se enviará el formulario.
// Minified your function for brevity function newElement(){var e=document.createElement("li"),t=document.getElementById("myInput").value,n=document.createTextNode(t);e.appendChild(n),""===t?alert("You must write something!"):document.getElementById("myUL").appendChild(e),document.getElementById("myInput").value="";var d=document.createElement("SPAN"),m=document.createTextNode("×");d.className="close",d.appendChild(m),e.appendChild(d)} document.getElementById("form").addEventListener("submit", e => { e.preventDefault() newElement() }) <form id="form"> <input id="myInput"> <button type="submit">➕</button> </form> <ul id="myUL"></ul>