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

jQuery

2018.10.27

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>

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