Web技術系中心に割と何でも更新中

【jQuery】入力した文字数をカウントして表示させる方法【カウントアップ・カウントダウン】

Programming Web

Web制作者
「入力欄に文字数をカウントして表示させたい」

こういった要望にお応えします。

本記事の内容

  • jQueryで入力した文字数をカウントアップして表示する方法
  • jQueryで入力した文字数をカウントダウンして表示する方法

こんにちは、mineです。
Web制作歴は7年になります。

ユーザビリティを上げるために、入力フォームで入力した文字数を表示したい場合ってありますよね?

例えば、入力欄で文字数を制限したいときなど、ユーザーにわかりやすいように文字数を出したりしますね。

この記事ではjQueryを使った入力した文字数をカウントしてリアルタイムで表示させる方法をご紹介します。

入力された文字数をカウントアップして表示させる方法

カウントアップ

まずは、カウントアップして表示させる方法を紹介します。
下記のような仕様を設定しました。

仕様

  • 全角半角にかかわらず1文字カウント
  • スペース・改行は文字数にカウントしない
  • 入力したテキストが100文字を超えると赤文字で「100文字を超えています」というアラートが表示される

イメージ

カウントアップイメージ

実際に入力欄に文字を入力すると、入力した文字数がカウントされて入力欄の下に「現在○○文字」のテキストが表示されます。

HTML

<textarea id="input_text" name="input_text" placeholder="テキストを入力"></textarea>
<p>
	<span class="count_num"></span>
	<span class="count_alert"></span>
</p>

<textarea>タグで文字の入力欄を用意します。

また、下記のように文字数を表示するための要素とアラートを表示するための要素を用意し、中身は空の状態にしておきます。

  • 入力文字数表示用クラス(count_num
  • アラート表示用クラス(count_alert

CSS

textarea{
	border: 1px solid #bbbbbb;
	min-height: 250px;
	font-size: 16px;
	width: 100%;
	line-height: 20px;
	padding: 10px;
	margin:0 0 5px 0;
	box-shadow: none;
	resize: both;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	min-height: 150px;
}
.count_num {
	font-weight: bold;
	display: block;
	margin:0 0 5px 0;
}
.count_alert {
	color:#ff0000;
	font-weight: bold;
	display: block;
}

今回はCSSについては特別なことしていませんが、<textarea>min-height設定しています。

jQuery

$(function(){
	// 初期状態での文字数取得・表示
	var txt = $('textarea#input_text').val(),
		new_txt = $.trim(txt.replace(/\n/g, "")),
		couter = new_txt.length;
	$('.count_num').html("現在" + couter + "文字");
	// 入力時の文字数取得・表示、アラート表示
	$('textarea#input_text').bind('keydown keyup keypress change',function(){
		var txt = $(this).val(),
			new_txt = $.trim(txt.replace(/\n/g, "")),
			couter = new_txt.length;
		$('.count_num').html("現在" + couter + "文字");
		if(couter > 100){
		   $('.count_alert').html("100文字を超えています");
		}else{
		   $('.count_alert').html("");
		}
	});
});

jQueryを使って入力された文字数を表示させます。

初期状態での文字数取得・表示

初めに.val()メソッドで<textarea>のテキストを取得して、変数txtへ格納します。変数txt.trim()、.replace()メソッドで空白・改行を削除して変数new_txtへ再格納します。

変数new_txtの中身の文字数を.lengthメソッドで取得して、変数counterに格納します。.html()メソッドで取得した文字数を表示させます。

入力時の文字数取得・表示、アラート表示

.bind()メソッドを使って文字入力されたときの文字数の取得・表示を実現します。

文字数を取得して、表示させるところまでは、上記の初期状態の時と同じです。
その後に、if~elseで、入力文字数が100文字を超えたら「100文字を超えています」というアラートを表示させ、それ以外は何も表示しないようにします。

任意に設定した文字数から入力された文字数を減らして表示させる方法(カウントダウン)

カウントダウン

次に、カウントダウンして表示させる方法を紹介します。
下記のような仕様を設定しました。

仕様

  • 全角半角にかかわらず1文字カウント
  • スペース・改行は文字数にカウントしない
  • 上限を200文字として、入力した文字数が200からマイナスされて表示される
  • 入力したテキストが200文字を超えると赤文字で「OK!」というアラートが表示される

イメージ

カウントダウンイメージ

実際に文字を入力すると、設定した文字数上限 - (入力した文字数)が右下に”現在○○文字”というように表示されます。

設定した文字数上限を超える文字数を入力すると、OK!のアラートが表示されます。

HTML

<textarea id="input_text" name="input_text" placeholder="テキストを入力"></textarea>
<p>
	<span class="count_num"></span>
</p>

<textarea>タグで文字の入力欄を用意します。

また、下記のように文字数を表示するための要素とアラートを表示するための要素を用意し、中身は空の状態にしておきます。

  • 入力文字数表示用クラス(count_num

CSSで装飾する

textarea{
	border: 1px solid #bbbbbb;
	min-height: 250px;
	font-size: 16px;
	width: 100%;
	line-height: 20px;
	padding: 10px;
	margin:0 0 5px 0;
	box-shadow: none;
	resize: both;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
textarea#input_text{
	min-height: 150px;
}
.count_num {
	font-weight: bold;
	display: block;
	margin:0 0 5px 0;
}

CSSに関してはカウントアップとほぼ同じです。

jQuery

$(function(){
	var countMax = 200;/*上限文字数を設定*/
	var txt = $('textarea#input_text').val(),
		new_txt = $.trim(txt.replace(/\n/g, "")),
		countDown = countMax - new_txt.length;
	$('.count_num').html("残り" + countDown + "文字");
	$('textarea#input_text').bind('keydown keyup keypress change',function(){
		var txt = $(this).val(),
			new_txt = $.trim(txt.replace(/\n/g, "")),
			countDown = countMax - new_txt.length;
		$('.count_num').html("残り" + countDown + "文字");
		if(countDown < 1){
			$('.count_num').css({color:'#ff0000'});
			$('.count_num').html("OK!");
		} else {
			$('.count_num').css({color:'#000000'});
			$('.count_num').html("残り" + countDown + "文字");
		}
	});
});

jQueryを使って上限文字数から入力された文字数を引いた数字を表示させます。

初期状態での文字数取得・表示

初めに.val()メソッドで<textarea>タグのテキストを取得して、変数txtへ格納します。さらに、変数txt.trim()メソッドと.replace()メソッドで空白・改行を削除して、変数new_txtへ再格納します。

変数countMaxに、上限文字数200を格納します。変数countMaxから.lengthで取得した変数new_txtの文字数を引いた数字を変数countMaxに格納します。

.html()で取得した文字数を表示させます。

入力時の文字数取得・表示、アラート表示

.bind()を使って文字入力されたときの残りの文字数取得・表示を実現します。

文字数を取得して、表示させるところまでは、上記の初期状態の時と同じです。
その後に、if~elseで、残り文字数(200 – 入力文字数)が0以下になった時に赤文字で「OK!」というアラートを表示させ、それ以外は通常通り残り文字数を表示させます。

まとめ

思ったよりも簡単に文字カウンターを実現できました。一見難しそうに思えますが、仕組み・考え方が分かれば、さほど難しくはないでしょう。

短いコードの中にも下記のようなメソッドが使われています。

今回使用しているjQueryのメソッド

  • .val()
  • .trim()
  • .replace()
  • .length()
  • .bind()
  • .html()
  • .css()

他にも正規表現なども使用しているため、今回のソースコードを理解するだけでも、jQueryの知識が深まりますよ。

おすすめ記事 【体験談】弁護士の退職代行で有給30日分を取得した話

おすすめ記事 「知らないから落ちる面接の4点減点法」で面接に挑んだ結果