【コピペ対応版】jQueryでテキストエリアの文字数をカウントする方法

      2016/05/23

JQueryでテキストフォームの文字数をカウントするサンプル

textarea内の文字数をリアルタイムにカウントするサンプルです。blurおよびkeyupイベントを拾って、文字数をカウントします。そのためテキストフォームにコピペをした時にも文字数をカウントしてくれます。2バイト文字も1文字とカウントします。

動作デモはこちらです。以下にサンプルを記述します。

<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

<script>
$(document).ready(function(){
	$('#targetTextArea').bind('keyup',function(){
		counter = $(this).val().length;
		$('#result').html(counter);
	});

	$('#targetTextArea').blur(function(){
		counter = $(this).val().length;
		$('#result').html(counter);
	});
});
</script>
</head>
<body>

テキストエリア
<textarea name="test" class="" id="targetTextArea" cols="30" rows="6"></textarea>

<br>

文字数
<span id="result">0</span>文字

</body>
</html>

 

ちょっとしたことですが、文字数に制限があるフォームなどに表示しておくと、ユーザビリティが向上すると思います。参考にしてみてください。では

megane

megane

最近、個人事業主から法人へと進化しました。 エンジニア歴13年位です。PHPとかMysqlを使ってWebシステムを構築します。 Javaも書きます。 CakePHPも使います。 サーバのチューニングもごりごりやります。 あと、お肉と自動車が好きです。Twitterとか申請どうぞ。

 - jQuery