<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.