Счетчик символов в реальном времени на JS

Счетчик символов в реальном времени на JS

Счетчик символов в реальном времени на 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>

Счетчик символов в реальном времени на JS

Стилизация формы

Добавим к форме 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;
}

Счетчик символов в реальном времени на JS

JavaScript код

Находим в документе нужные нам элементы, которые будут непосредственно задействованы в подсчитывании символов. Найденные теги textarea и span с классом count, занесем в переменные textarea и count. Далее пишем действия в теле функции, внутри фигурных скобок.

  • #1 — вводимые пользователем символы записываются в переменную text.
  • #2 — браузер разбивает вводимые символы на соответствующий код и определяет их длину.
  • #3 — осуществляется вывод на HTML странице подсчитанного количества символов на текущих момент.

  • 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
    }

    Счетчик символов в реальном времени на JS

    Посмотрите пример на CodePen

    Источник