Loading…
En unos segundos, estará listo.
- Teoría
- Teoría
Contador de caracteres en la página
Ya calculamos la longitud al editar el texto. Ahora vamos a mostrarla debajo del campo y a quitar la salida de diagnóstico de la consola.
El HTML ya contiene el elemento <output class="char-counter">0</output>. La etiqueta output sirve para mostrar el resultado de un cálculo. El número después de la barra indica el límite; por ahora no necesitas cambiarlo.
Busquemos el contador con querySelector y guardémoslo en charCounter. La propiedad textContent, que ya conoces, nos ayudará a mostrar la longitud calculada. La asignación debe ejecutarse dentro de oninput para que el número cambie junto con el texto del campo.
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');
// Declara aquí la variable charCounter.
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);
};
commentField.oninput = function () {
console.log(commentField.value.length);
};
El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
100%
Consola
- Después de la declaración de
commentField, declara la variablecharCountery guarda en ella el elemento.char-counter. - Dentro de
oninput, reemplaza la salida en la consola por una asignación del valorcommentField.value.lengthacharCounter.textContent. - Escribe un texto de al menos tres caracteres en el campo de comentario. El contador debajo del campo mostrará su longitud.