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

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

Contents

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

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

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

<style type="text/css">
<!--
body{
	font-size: 12px;
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",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-->