JavaScript - Count textarea characters in real-time
A method and simple code example to count textarea characters in real-time using JavaScript.
The HTML has a textarea to count characters and an output element.
<div>
<p id="output">Characters: 0</p>
<textarea id="target" placeholder="Input text here"></textarea>
</div>
The textarea input event is implemented with addEventListener()
.
The current value is gotten with "value" and character count with "length".
The code example outputs the character count to the element with id "output".
// Textarea input event
document.querySelector('#target').addEventListener('keyup', () => {
// Get textarea character count
let length = document.querySelector('#target').value.length;
// Output character count
document.querySelector('#output').innerHTML = `Characters : ${length}`;
});
TitleJavaScript - Count textarea characters in real-time
CategoryJavaScript
Created
Update
AuthorYousuke.U