Introduction

*** счетчик символов *** - это удобная * функция пользовательского интерфейса*, которая отображает оставшееся количество символов, которые пользователь может ввести в текстовое поле - если текстовое поле ограничено относительно небольшим размером ввода (например, Ограничение Twitter на 280 символов в твите). Эта функция обычно используется вместе с элементами * текстовая область* и / или * поле ввода* для уведомления пользователя о количестве используемых и оставшихся символов.

В этой статье мы узнаем, как реализовать счетчик символов для текстовых областей в JavaScript с нуля.

Вероятно, самым известным примером счетчика символов является счетчик символов Twitter. Он уведомляет вас, когда длина вашего твита приближается и превышает 280 символов, но не мешает вам вводить больше символов. Эта функция широко популярна, потому что она не обрезает текст, когда вы вставляете фрагмент текста длиной более предписанной длины символов, и позволяет вам соответствующим образом спланировать, как вы будете разбивать его на несколько твитов!

К концу этой статьи вы сможете создать поле ввода, подобное этому:

Примечание: Весь код, используемый для создания формы, будет присутствовать в руководстве. Кроме того, исходный код и предварительный просмотр в реальном времени доступны на CodePen. ::: :::

Как реализовать счетчик символов в JavaScript

Первое, что нам нужно настроить перед внедрением счетчика символов , - это базовая HTML-форма. Он будет содержать поле textarea и текст, представляющий счетчик символов. В нем отображается максимальное количество символов и количество оставшихся символов. Если допустимое количество символов превышено, текст меняет цвет на красный:

<form>
    <h3>Написать Биографию: </h3>
    <textarea name="tweet" id="textbox" class="form-control" rows="10" cols="60"></textarea>
    <span id="char_count">100/100</span>
    <button type="submit">Сохранить</button>
</form>

Объявление переменных

После создания базовой HTML-формы следующим шагом является * реализация логики счетчика символов с использованием JavaScript*. Первым шагом в создании логики JavaScript является определение наших переменных и получение компонентов ДОМЕНА , которые мы будем использовать позже. В частности, поле textarea и элемент span, отображающий счетчик символов:

let textArea = document.getElementById("textbox");
let characterCounter = document.getElementById("char_count");
const maxNumOfChars = 100;

textArea будет использоваться для добавления события, которое активирует логическую функцию. Есть множество событий, которые мы можем использовать, но “keyup” лучше всего подходит для этого варианта использования, поскольку он будет запускать логическую функцию каждый раз при нажатии клавиши - символ добавляется или удаляется из текстовой области. characterCounter используется для отображения счетчика символов, а maxNumOfChars определяет максимальное количество символов, которые может ввести пользователь.

Реализация Логики

Следующим шагом было бы создание фундаментальной логики, которая позволяет нам определять длину текста, введенного в “Текстовое поле”, а также вычитать длину из максимального количества выбранных нами символов. Вот как могла бы выглядеть структура логической функции :

const countCharacters = () => {
    // Вычислите количество символов, введенных в текстовое поле
    // Подсчитайте количество оставшихся символов
    // Отобразите это число в теге span
};

А вот как выглядит реализация упомянутой структуры любить:

const countCharacters = () => {
    let numOfEnteredChars = textArea.value.length;
    let counter = maxNumOfChars - numOfEnteredChars;
    characterCounter.textContent = counter + "/100";
};

Примечание: Пожалуйста, имейте в виду, что count Characters() на данный момент не обрабатывает какой -либо стиль. Например, мы хотели бы изменить цвет счетчика на красный, когда приближается или превышается максимальное количество символов. Мы реализуем это через мгновение, так как это более субъективный тип добавления. ::: :::

Наконец, для того, чтобы это сработало, мы должны добавить EventListener, который будет запускать / вызывать этот метод каждый раз, когда символ добавляется / удаляется из поля textarea с помощью события input. В качестве альтернативы мы можем вместо этого использовать события keyup или keydown:

textArea.addEventListener("input", countCharacters);

Настройка Цвета Счетчика

Мы хотели бы “предупредить” пользователя о превышении определенного максимального количества символов, а также о приближении к нему. Это легко достигается с помощью условных операторов, где мы проверяем, является ли “счетчик” меньше нуля или меньше, скажем, “20”, если мы хотим предупредить их о том, что они приближаются к пределу:

if (counter < 0) {
    characterCounter.style.color = "red";
} else if (counter < 20) {
    characterCounter.style.color = "orange";
} else {
    characterCounter.style.color = "black";
}

Здесь мы изменили текст только в зависимости от количества оставшихся символов. Там многое можно изменить. Например, вы можете отключить текстовое поле, если набрано слишком много символов, автоматически обрезать содержимое и так далее.

Вывод

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