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.
Table of Contents
JavaScript On Click Button Count Characters
This function count all characters length in the textarea when you click the button
<textarea id="user-text" rows="10" cols="50"></textarea>
<button id="count-btn">count characters</button>
<div id="char-length">0</div>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;
});JavaScript On Change Event Function Count Characters
This function calculates the length of all characters in the textarea after you type blur textarea.
const textarea = document.getElementById("user-text");
textarea.addEventListener("change", function() {
let total_length = this.value.length;
document.getElementById("char-length").innerText = total_length;
});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
const textarea = document.getElementById("user-text");
textarea.addEventListener("input", function() {
let total_length = this.value.length;
document.getElementById("char-length").innerText = total_length;
});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.
<textarea id="user-text" rows="10" cols="50" maxlength="100"></textarea>
<div id="char-length">Characters remaining 100</div>(() => {
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);
});
})();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.
<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>.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%;
}(() => {
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);
});
})();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.
<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>.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;
}(() => {
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;
});
})();
