Home • WEB Мастеру • Статьи • Счетчик количества символов, вводимых в textarea

Счетчик количества символов, вводимых в textarea Самая легкая версия!

📝 Пост № 101 от 16 января 2023 | В категории WEB Мастеру, Статьи | Комментариев нет

text-area-counter

Если у вас есть Twitter аккаунт, то вы наверняка заметили, как работает функция публикации поста. Точнее – как ограничивает сервис количество символов, вводимых в текстовое поле при публикации статьи. Это ограничение, как показывает практика, не позволяет копипастить огромный текст, а только ограничится выдержкой.

Точно такой “финт ушами” можете использовать и вы в своем блоге или сайте, посмотрев эту короткую публикацию…

На картинке ниже – готовый вариант дизайна.
t-area-count

А здесь вы сможете посмотреть работу этой функции. Скопируйте (если это необходимо вам) все файлы в папку и разместите у себя в блоге, прописав стили, скрипты и код вывода счетчика.

See the Pen
Character counter in Textarea by Vadim Master (@Vadim-Master)
on CodePen.

Настройка, которую вы можете изменить по своему усмотрению – это количество символов, прописанных в maxlength. Так же, если у вас есть такая необходимость, то в файле стилей можно поменять цвет цифр счетчика.

По умолчанию основной текст стандартно черный, а при приближении к границе ограничения количества символов – счетчик поменяет цвет на красный. Все, как в Твиттере, но код гораздо проще. Кстати, еще один вариант счетчика можете посмотреть здесь.

Данный скрипт показывает количество символов только после того, как вы начнете вводить текст в поле.

Пользуйтесь!

Удачи и до новых встреч!
С уважением, MasterPRO