Teoría
Teoría

Evento input: responder a la entrada de texto

El sitio de noticias de Cupcake ya tiene un formulario de comentarios que funciona: el manejador onsubmit crea un elemento, lo agrega a la lista y vacía el campo. Ahora Cupcake quiere limitar los comentarios a 142 caracteres y mostrar el estado del formulario antes de enviarlo. Empecemos por responder a la entrada de texto.

El evento input ocurre cuando una persona cambia el texto: escribe letras, pega texto o lo elimina. El manejador oninput se asigna al campo, mientras que onsubmit se asigna al formulario. Ya conoces la estructura de un manejador:

let nameField = document.querySelector('.name-field');
nameField.oninput = function () {
  console.log(nameField.value);
};

Dentro del manejador obtenemos el texto actual de la propiedad value. Después de cada cambio que haga la persona en el campo, el texto aparecerá en la consola. El campo de nuestro formulario ya está guardado en la variable commentField.

Por ahora, debajo del campo hay un contador que no cambia. En los próximos pasos haremos que se actualice y después agregaremos una advertencia y controlaremos el botón.

Todos los archivos

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> <title>FlashNews! — comentarios</title> </head> <body class="page light-theme"> <header class="page-header"> <div class="container"> <span class="header-logo"><img src="img/main-logo.svg" width="67" height="29" alt="Logotipo de FlashNews!"></span> </div> </header> <main class="inner-news"> <article class="container"> <h1 class="inner-heading">Caminar puede ser bueno para ti</h1> <div class="news-full"> <img src="img/walk.jpg" alt="Personas caminando"> <p>Un estudio reveló que las relaciones con nuestros seres queridos influyen más en la felicidad que el sueldo o el número de seguidores. Todavía no se sabe cómo influye la cantidad de gatitos.</p> </div> </article> <section class="comment-feed container"> <h2>Comentarios</h2> <ol class="comment-list"> <li class="user-comment">¡Una buena razón para salir a caminar y comentar las noticias con amigos!</li> </ol> <form action="https://codigoheroe.com/echo" method="post" class="comment-form"> <div class="comment-inner"> <label class="comment-label" for="comment-textarea">Tu comentario</label> <textarea class="comment-field comment-area" rows="4" placeholder="Comentario" required id="comment-textarea"></textarea> </div> <span class="text-counter">Caracteres usados: <output class="char-counter" for="comment-textarea">0</output>/<span class="char-limit">142</span></span> <button class="button submit-button" type="submit">Enviar</button> </form> </section> </main> <footer class="page-footer"> <div class="container"> <p>© FlashNews!</p> <span class="footer-logo"><img src="img/white-logo.svg" alt="Logotipo de FlashNews!"></span> </div> </footer> <script src="comments.js"></script> </body> </html>

/* Estilos preparados para el campo y el contador */ .comment-area { height: auto; resize: vertical; margin-bottom: 10px; padding-top: 4px; padding-bottom: 4px; line-height: 24px; } .text-counter { display: inline-block; padding: 7px 0; margin-right: auto; } /* La clase warning resalta un comentario demasiado largo */ .comment-form.warning .comment-label, .comment-form.warning .comment-area, .comment-form.warning .char-counter { color: #c43d13; } .comment-form.warning .comment-area { outline: 2px solid #c43d13; } .comment-form.warning .char-counter { font-weight: bold; } /* El botón deshabilitado se ve más tenue */ .submit-button:disabled { opacity: 0.35; cursor: default; }

let commentForm = document.querySelector('.comment-form'); let commentList = document.querySelector('.comment-list'); let commentField = document.querySelector('.comment-field'); commentForm.onsubmit = function (evt) { evt.preventDefault(); let newComment = document.createElement('li'); newComment.classList.add('user-comment'); newComment.textContent = commentField.value; commentField.value = ''; commentList.append(newComment); }; // Agrega aquí el manejador de entrada.

ObjetivosRealizado

En la línea 15, agrega al elemento commentField un manejador de eventos oninput con la instrucción commentField.oninput = function () { };.
Dentro del manejador oninput, muestra en la consola el valor de commentField.value con la instrucción console.log(commentField.value);.
En el campo de comentario del mininavegador, escribe un texto de al menos tres caracteres, por ejemplo Sol.
Abre la consola del mininavegador y encuentra el texto que escribiste.