JavaScript - テキストエリアの文字数をリアルタイムでカウントする

JavaScriptでテキストエリアの文字数をリアルタイムでカウントする方法と簡単なコード例です。

HMLには文字数をカウントする対象のテキストエリアを設置しています。

<div>
	<p id="output">文字数：0</p>
	<textarea id="target" placeholder="このテキストエリアはタブが入力可能です。"></textarea>
</div>

addEventListener()でテキストエリアの入力イベントを実装しています。
「value」で現在の値を取得、「length」にて文字数を数えます。

コード例では、取得した文字数をid「output」に出力しています。

// テキストエリアでのキー入力イベントを作成
document.querySelector('#target').addEventListener('keyup', () => {

	// テキストエリアの文字数を取得
	let length = document.querySelector('#target').value.length;
	// テキストエリアの文字数を出力
	document.querySelector('#output').innerHTML = `文字数 : ${length}`;

});