Функциональность счетчика живых символов — это то, что сообщает нам, сколько всего символов мы ввели в текстовое поле или текстовую область и сколько осталось.

С помощью счетчика живых символов вы можете показать живую индикацию того, сколько символов вы ввели и сколько вы можете ввести.

Количество введенных символов

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

<!DOCTYPE html>
<html>
   <head>
      <title>Live Characters Count</title>
   </head>
   <body>
<h2>Live Characters Count</h2>
<form action="/action_page.php">
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="liveCharactersCount(this);"></textarea><br>
      <input type="submit" value="Submit">
   </form>
<p id="characters-count-notification">0 characters</p>
</body>
</html>

Теперь создайте функцию и запустите ее по событию onkeyup textarea.

<script>
   function liveCharactersCount(obj){
      document.getElementById("characters-count-notification").innerHTML = obj.value.length+' characters';
   }
</script>

Количество оставшихся символов

Чтобы оставшиеся символы считались функциональными, мы сделаем функцию javascript, которая имеет постоянную максимальную длину символов.

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

<!DOCTYPE html>
<html>
   <head>
      <title>Remaining Characters Count</title>
   </head>
   <body>
<h2>Remaining Characters Count</h2>
<form action="/action_page.php">
      <label for="message">Message:</label><br>
      <textarea id="message" name="message" value="" rows="10" cols="50" onkeyup="remainingCharactersCount(this);"></textarea><br>
      <input type="submit" value="Submit">
   </form>
<p id="characters-count-notification">200 characters remaining</p>
</body>
</html>

Теперь давайте создадим функцию javascript для подсчета общего количества символов, а затем отобразим количество оставшихся символов.

<script>
   function remainingCharactersCount(obj){
      var maxLength = 200;
      var charLength = obj.value.length;
      var charRemaining = (maxLength - charLength);
    
      if(charRemaining < 0){
         document.getElementById("characters-count-notification").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
      } else {
         document.getElementById("characters-count-notification").innerHTML = charRemaining+' characters remaining';
      }
   }
</script>

Поэтому просто добавьте приведенный выше код javascript в раздел заголовка HTML-страницы или в отдельный файл для вызова этой функции. Вы можете настроить его по своему усмотрению и сделать его более стильным с помощью CSS и начальной загрузки.