0
203
VisualizaçõesCómo evitar ingresar más valor cuando presiono enter usando el evento keydown
Lo siento de antemano si no estoy teniendo ningún sentido. Soy un completo principiante en la codificación. Estoy creando una lista de compras y un usuario ingresará los artículos a través del marcador de posición y hará clic o presionará Intro para agregar los artículos en la lista.
El evento de clic funciona correctamente.
Editar
var button = document.getElementById("enter"); var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); button.addEventListener("click", function() { if (input.value.length > 0) { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } }) document.addEventListener('keydown', function (event) { if (input.value.length > 0, event.key === 'Enter') { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } }); <input type='text' id='userinput' /> <button type='button' id='enter'>Enter</button> <ul></ul>2 Respostas
Responde à pergunta0
¿Puedes dar más detalles sobre tu pregunta? Además, adhiérase al principio "SECO". Tiene tanto el botón como la entrada agregando un elemento y luego agregándolo a la lista: cree una función que tome la entrada y la llame tanto en el botón como en el evento de entrada:
function addListItem(input){ var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; };Se verá así:
button.addEventListener("click", function() { if (input.value.length > 0) { AddListItem(input); } }); input.addEventListener('keyup', function (event) { if (input.value.length > 0 && event.key === 'Enter') { AddListItem(input); } });0
// Entonces, si lo estoy consiguiendo correctamente. Tiene un campo de entrada y // está leyendo valores de ese campo // Entonces agregue 'keyup' al elemento de entrada. // ¿Fijar el IF // controlar la longitud de entrada para controlar los valores?
Necesito más información sobre esto: cómo evitar ingresar más valor cuando presiono enter usando el evento keydown
var input = document.getElementById("userinput"); var ul = document.querySelector("ul"); var btn = document.querySelector('#enter') btn.addEventListener("click", function() { if (input.value.length > 0) { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } }) input.addEventListener('keyup', function (event) { //basically, if the input value is falsy('') you return nothing or false (abort) if(!input.value) { return; //return false; //alert('cannot add empty list item') } if (input.value.length > 0 && event.key === 'Enter') { var li = document.createElement("li"); li.appendChild(document.createTextNode(input.value)); ul.appendChild(li); input.value = ""; } });