Material Box

Material Box

WEB Design & Material Images

JavaScript - Count textarea characters in real-time

JavaScript

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}`;

});

JavaScript - Count textarea characters in real-time

TitleJavaScript - Count textarea characters in real-time

CategoryJavaScript

Created

Update

AuthorYousuke.U