JavaScript

テキストエリアの入力文字から残りの文字数を表示する方法【JavaScript】

テキストエリアの入力文字から残りの文字数を表示する方法をご紹介します。
twitterでつぶやく時にもありますね。簡単な記述ですがパッと思い浮かばなかったりするので紹介します。

テキストエリアの入力文字から残りの文字数を表示するCSSの記述

※残りの文字数(#idStrlength)を表示するCSSの記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	font-size: 12px;
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif;
	color:#000000;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.2em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	text-align:center;
}
#idStrlength{
	padding-bottom:10px;
	font-size:12px;
	color:#FF0000;
}
-->
</style>

テキストエリアの入力文字から残りの文字数を表示するJavaScriptの記述

※テキストエリアの入力文字数(str)から残りの文字数を計算し、idStrlengthに残りの文字数を出力します。

<script type="text/javascript">
function strlength(str) {
	document.getElementById("idStrlength").innerHTML = "あと" + (100-str.length) + "文字";
}
</script>

テキストエリアの入力文字から残りの文字数を表示するHTMLの記述

※テキストエリアにonkeyupで入力文字数をパラメータ(value)として渡します。id=”idStrlength”に残りの文字数を出力します。

<h1>テキストエリアに入力した文字から残りの文字数を表示</h1>
<div id="idWrap">
	<div id="idStrlength">あと100文字</div>
	<textarea name="message" id="textfield03" onkeyup="strlength(value)" cols="40" rows="10"></textarea>
	<p>(最大100文字に設定してます)</p>
</div><!--/idWrap01-->

テキストエリアに入力した文字から残りの文字数を表示するデモページ

テキストエリアに入力した文字から残りの文字数を表示するデモ

会員登録フォームの入力項目に入れてあげるとユーザビリティ的に良いかもしれません。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。