Счетчик символов в реальном времени на JS
Авторам статей или коммерческих текстов удобно писать и сразу видеть сколько символов уже написано. Ведь от этого зависит, сколько денег в итоге они получат. Такой скрипт легко встраивается на сайт и человек пишет свой текст в HTML форме.
Создание HTML формы
Подсчет символов происходит внутри поля textarea с помощью события onkeyup. Событие onkeyup возникает в момент отпускания нажатой клавиши. На событие вешается функция countLetters(), в которой последовательно записаны инструкции для браузера, что конкретно нужно делать.
<div class="container">
<h3>Счетчик символов</h3>
<textarea placeholder="Пишите ваш текст здесь..." onkeyup="countLetters();"></textarea>
<p>Всего символов: <span class="count">0</span>
</p>
</div>
Стилизация формы
Добавим к форме CSS стили для визуальной эстетичности.
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex; / * включение flexbox * /
justify-content: center; / * центрирование по горизонтали * /
align-items: center; / * центрирование по вертикали * /
min-height: 100vh; / * на всю высоту экрана * /
background: #FFF8E1; / * цвет фона страницы * /
}
.container {
width: 550px; / * ширина контейнера * /
padding: 40px; / * поля внутри контейнера * /
background: #FFCCBC; / * цвет фона контейнера * /
display: flex;
flex-direction: column; / * расположение элементов в колонке * /
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); / * тень у контейнера * /
}
.container h3 {
font-size: 2em;
margin-bottom: 10px; / * отступ между заголовком и полем * /
color: #333;
}
.container textarea {
position: relative; / * относительное позиционирование * /
margin-bottom: 20px;
resize: none; / * запрет на изменения размеров поля * /
width: 100%;
height: 200px;
padding: 10px;
outline: none;
font-size: 18px;
border: none;
}
p {
display: flex;
align-items: center;
font-size: 20px;
color: #333;
}
.container .count {
font-size: 24px;
color: #f00;
margin-left: 10px;
font-weight: 500;
font-weight: 600;
}
JavaScript код
Находим в документе нужные нам элементы, которые будут непосредственно задействованы в подсчитывании символов. Найденные теги textarea и span с классом count, занесем в переменные textarea и count. Далее пишем действия в теле функции, внутри фигурных скобок.
const textarea = document.querySelector("textarea");
const count = document.querySelector(".count");
function countLetters() {
const text = textarea.value; // #1
const textlength = textarea.value.length; // #2
count.innerText = `${textlength}`; // #3
}
Посмотрите пример на CodePen
