Counting Characters Length In Textarea Using JavaScript

The following JavaScript code can be used to count the characters in the textarea and input textbox. The following JavaScript event handler can be used to count characters, when you click a button, after typing in Textarea, count characters in real time as you type something.

JavaScript On Click Button Count Characters

This function count all characters length in the textarea when you click the button

Preview
0
HTML javaScript Code
HTML
<textarea id="user-text" rows="10" cols="50"></textarea>
<button id="count-btn">count characters</button>
<div id="char-length">0</div>
JavaScript
const counter_button = document.getElementById("count-btn");
counter_button.addEventListener("click", function() {
    let total_length = document.getElementById("user-text").value.length;
    document.getElementById("char-length").innerText = total_length;
});
Try it Yourself

JavaScript On Change Event Function Count Characters

This function calculates the length of all characters in the textarea after you type blur textarea.

Preview
0
HTML javaScript Code
HTML
<textarea id="user-text" rows="10" cols="50"></textarea>
<div id="char-length">0</div>
JavaScript
const textarea = document.getElementById("user-text");
textarea.addEventListener("change", function() {
    let total_length = this.value.length;
    document.getElementById("char-length").innerText = total_length;
});
Try it Yourself

Live Character Counter Using JavaScript

The following code calculates the length of all characters in real time. When you type text or copy and paste into the textarea

Preview
0
HTML javaScript Code
HTML
<textarea id="user-text" rows="10" cols="50"></textarea>
<div id="char-length">0</div>
JavaScript
const textarea = document.getElementById("user-text");
textarea.addEventListener("input", function() {
    let total_length = this.value.length;
    document.getElementById("char-length").innerText = total_length;
});
Try it Yourself

How To Limit The Number Of Characters Entered In A Textarea

Set the maximum number of characters that can be entered in the textarea using javaScript. Use this JavaScript to limit user input text.

This is helpful for users to show how many characters remaining in HTML textarea.

Preview
0
HTML javaScript Code
HTML Code
<textarea id="user-text" rows="10" cols="50" maxlength="100"></textarea>
<div id="char-length">Characters remaining 100</div>
JavaScript Code
(() => {
    let max_length = 100;
    let textarea = document.getElementById("user-text");
    // set attribute max length 
    textarea.setAttribute("maxlength", max_length);

    textarea.addEventListener("input", function() {
        let value_length = this.value.length;
        if (value_length > max_length) {  
            this.value = this.value.substring(0, max_length);
            value_length = this.value.length;
        }  
        document.getElementById("char-length").innerText = "Characters remaining "+(max_length - value_length);
    });

})();
Try it Yourself

How to Create a Character Counting Progress Bar Using JavaScript

Creating a simple Character Count Progress Bar using HTML, CSS and JavaScript. It is helpful for users to show the progress of what percentage of characters are left when the user types something in the textarea

This progress bar background color changes when the textarea character count is below 25 percent, above 50 percent, and 100 percent opposition.

Preview
7 / 50
HTML
<textarea id="user-text" rows="10" cols="50" maxlength="100"></textarea>
<div class="progress">
  <div id="progress-bar"></div>
</div>
<div id="char-length">0</div>
CSS
.progress {
    position: relative;
    width: 100%;
    height: 5px;
    background-color: #f1f1f1;
    overflow: hidden;
    margin: 5px 0;
}
div#progress-bar {
    background-color: #ffc107;
    width: 0%;
    top: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    display: inline-block;
    height: 100%;
}
JavaScript
(() => {
    let max_length = 100;
    let textarea = document.getElementById("user-text");
    // set attribute max length 
    textarea.setAttribute("maxlength", max_length);
    let char_length_id = document.getElementById("char-length");
    let progress_bar = document.getElementById("progress-bar");

    const barColor = total => {
        let color = "#FFC107";
        if (total <= 25) {
            color = "#FFC107"; // orange
        } else if (total >= 100) {
            color = "#f00"; // red
        } else if (total >= 50) {
            color = "#00d000"; // green
        }
        return color;
    };

    textarea.addEventListener("input", function() {
        let value_length = this.value.length;
        if (value_length > max_length) {  
            this.value = this.value.substring(0, max_length);
            value_length = this.value.length;
        }  
        char_length_id.innerText = (max_length - value_length) +' / '+max_length;
        let persentage = Math.round((100 * value_length) / max_length);
        progress_bar.style.width = persentage+"%";
        progress_bar.style.backgroundColor = barColor(persentage);
    });

})();
Try it Yourself

Online Characters Counting Tool Count Total Words Paragraph And White-space

Copy and paste your text into the textarea below or you can type your words into the textarea. This counter tool shows the number of characters, words, paragraphs, and white-space in your text.

Preview
Paragraphs 0
Words 0
Spaces 0
Characters 0
HTML
<textarea id="user-text" rows="15" cols="80"></textarea>

<div class="count-box">
    <div class="count-box-row">
        <div>Paragraph</div>
        <div id="paragraph">0</div>
    </div>
    <div class="count-box-row">
        <div>Words</div>
        <div id="words">0</div>
    </div>
    <div class="count-box-row">
        <div>Space</div>
        <div id="space">0</div>
    </div>
    <div class="count-box-row">
        <div>Characters</div>
        <div id="characters">0</div>
    </div>
</div>
CSS
.count-box {
    display: flex;
    gap: 10px 10px;
    margin: 10px 0;
}
.count-box-row {
    background-color: silver;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 10px;
    padding: 5px 5px;
    border-radius: 3px;
}
JavaScript
(() => {
    const textarea = document.getElementById("user-text");
    const paragraph_id = document.getElementById("paragraph");
    const words_id = document.getElementById("words");
    const space_id = document.getElementById("space");
    const characters_id = document.getElementById("characters");

    const countAll = text => {
        let value = text.toString();
        let trim_value = value.trim();
        let paragraph = trim_value ? (trim_value.match(/\n+/g) || []).length + 1 : 0;
        let words = trim_value ? (trim_value.replace(/['";:,.?\-!]+/g, '').match(/\S+/g) || []).length : 0;
        let space = value.split(" ").length - 1;
        return {
            "paragraph": paragraph,
            "words": words,
            "space": space,
            "characters": value.length
        };
    };

    textarea.addEventListener("input", function() {
        let result = countAll(this.value);
        paragraph_id.innerHTML = result.paragraph;
        words_id.innerHTML = result.words;
        space_id.innerHTML = result.space;
        characters_id.innerHTML = result.characters;
    });
})();
Try it Yourself