How to display dynamically the number of typed characters in textarea?

• 0
  All greetings, there is textarea and its layout has a maximum length of 360 characters, how to dynamically display how many characters have been hammered into the field using native JavaScript? Screen for clarity

  JavaScript Evan Orr, Jul 12, 2020

---

2 Answers
• 0
  Use the input event on the textarea and take event.target.value.length in the handler - the number of characters driven. And push it into this counter.
  
  
  
  

  const ta = document.querySelector(...) // textarea
  
  const counter = document.querySelector(...) // счётчик
  
  
  
  ta.addEventListener('input', onInput)
  
  
  
  funcion onInput(evt) {
  
  const length = evt.target.value.length
  
  counter.textContent = length
  
  }

  
  
  
  
  

  August Gilmore

---

• 0
  https://jsfiddle.net/yarkov_aleksei/a4x6p1s3/
  
  
  
  

  <div class="container">
  
    <textarea name="" id="" cols="30" rows="10"></textarea>
  
    <div class="counter">
  
      <span class="current">0</span>&nbsp;/
  
      <span class="total">360</span>
  
    </div>
  
  </div>

  
  
  
  
  

  .container {
  
    position: relative;
  
    width: max-content;
  
  }
  
  
  
  .counter {
  
    position: absolute;
  
    bottom: 5px;
  
    right: 5px;
  
  }

  
  
  
  
  

  const textarea = document.querySelector('textarea');
  
  const counter = document.querySelector('.current');
  
  const maxlength = 360;
  
  
  
  textarea.addEventListener('input', onInput)
  
  
  
  function onInput(event) {
  
  	event.target.value = event.target.value.substr(0, maxlength); // обрезаем текст до 360 символов
  
  	const length = event.target.value.length;
  
  	counter.textContent = length;
  
  }

  Anonymous

---