はじめに

JavaScript を使った入力文字数をカウントしリアルタイムに表示させる記事は多数あるため、今更感があるのですが、検索すると keyup や change などでの記述が結構ありましたので、載せたいと思います。記事を投稿されていた当時、ブラウザが対応していたか否かにより、keyup や change などで記述されていたと思います。但し、keyup ではキーの長押し、change ではフォーカスがはずれないとなどの動きにいささか不満を抱いていたのではないでしょうか。現在「入力した文字数のリアルタイムのカウント」の実装は、前述の動きを考慮された input がベストと思われます。

サンプル

入力した文字数をカウントしリアルタイムに表示させる単純なサンプルです。
本サンプルを実装する際は、jQuery本体の読み込みをお忘れなく行ってください。

サンプルのHTML

<div>
	<input type="text" name="demo1" value="" id="demo1"><br>
	Count: <span id="countDemo1">0</span> 文字
</div>

サンプルのjQuery

$(function(){
	// 入力した文字数を表示
	$('#demo1').on('input',function(){
		$('#countDemo1').text($(this).val().length);
	});
});

上限値を設けてカウントダウン

入力文字数の上限を20文字とした場合のサンプルです。
本サンプルを実装する際は、jQuery本体の読み込みをお忘れなく行ってください。
カウント数を表示させる個所は、CSSを直接指定していますが、実際には addClass() と removeClass() を使うことが多いと思われます。

サンプルのHTML

<div>
	<input type="text" name="demo2" value="" id="demo2"><br>
	Count: <span id="countDemo2"></span> 文字
</div>

サンプルのjQuery

$(function(){
	// 上限値からカウントダウン
	const countLimit = 20; // 上限値
	const countDemo2 = $('#countDemo2');
	let remainingNumber;
	countDemo2.text(countLimit);
	$('#demo2').on('input',function(){
		remainingNumber = countLimit - $(this).val().length;
		if( remainingNumber > 0 )
		{
			countDemo2.text(remainingNumber);
			countDemo2.css('color','black');
		}
		else
		{
			countDemo2.text(0);
			countDemo2.css('color','red');
		}
	});
});

最後に

ホームページの新規制作・リニューアルは、神奈川県相模原市にあるオフィス木蓮までお気軽にご相談ください。お見積もりは無料です。セキュリティ対策を最優先とし、基本的ではあるものの高スコアなSEO対策、ユーザーの使い勝手などを考慮したサイトを提案します。他社で制作されたホームページの更新作業やメンテナンスにも対応しますのでお気軽にお問い合わせください。