Hello friends, in this post i will explain you how to
implement simple textarea character count using javascript.
By using this we can let users know how many characters has been typed and also let them know how many characters are remaining if maxlength is given.
Create a textarea and set maxlength and also bind a
javascript function to oninput event:
<body onload="characterCount()">
<textarea id="textArea" oninput="characterCount()" maxlength="250" rows="10" cols="50"></textarea>
<br>
Character Typed: <span id="charaterTyped"></span>
Character Remaining: <span id="charaterRemaining"></span>
</body>
Create a javascript function to handle oninput event
and count characters:
function characterCount() {
var maxLength = document.getElementById('textArea').getAttribute('maxlength');
var characterLength = document.getElementById('textArea').value.length;
var characterRemaining = maxLength - characterLength;
document.getElementById('charaterTyped').innerHTML = characterLength;
document.getElementById('charaterRemaining').innerHTML = characterRemaining;
}
Here’s the complete code to implement character count functionality. Create an
html page with name character-count.html and write the code written below:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function characterCount() {
var maxLength = document.getElementById('textArea').getAttribute('maxlength');
var characterLength = document.getElementById('textArea').value.length;
var characterRemaining = maxLength - characterLength;
document.getElementById('charaterTyped').innerHTML = characterLength;
document.getElementById('charaterRemaining').innerHTML = characterRemaining;
}
</script>
</head>
<body onload="characterCount()">
<textarea id="textArea" oninput="characterCount()" maxlength="250" rows="10" cols="50"></textarea>
<br>
Character Typed: <span id="charaterTyped"></span>
Character Remaining: <span id="charaterRemaining"></span>
</body>
</html>
Here’s how it looks on web:
