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 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 =
    counter.textContent = length

    August Gilmore

  • 0

    <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>

    .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) { =, maxlength); // обрезаем текст до 360 символов
    const length =;
    counter.textContent = length;

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!