2-2. カウントダウンして表示するJavaScriptを書く
次に、文字数をカウントダウンして表示するためのJavaScriptを記述します。 これは、以下のソースをそのままコピー＆ペーストするだけで構いません。（修正不要です。）
function CountDownLength( idn, str, mnum ) {
document.getElementById(idn).innerHTML = "あと" + (mnum - str.length) + "文字";
}
// --></script>
上記では、先ほどのonkeyupイベントハンドラで呼び出される「CountDownLength」関数を作っています。 第2引数（str）で渡された文字列の長さ（length）を数えて、第3引数(mnum）で渡された最大文字数から引いて残り文字数を求め、第1引数（idn）で渡された名称でidが振られている要素に書き出しています。
「あと」と「文字」の部分は、自由に書き換えられます。それ以外は、そのままコピー＆ペーストして下さい。
●"あと" + (mnum - str.length) + "文字"
変数strには、ユーザが入力した文字列が格納されています。
変数mnumには、HTMLで記述した最大文字数が格納されています。
「str.length」のようにlengthプロパティを使って文字列の長さを求め、それを最大文字数（mnum）から引くと、残りの文字数が得られます。 その前後に「あと」と「文字」という文字列を加えることで、「あと121文字」などのような文字列ができあがります。
それ以外の部分は、カウントアップするソースと同じです。
以上で、「入力された文字列の数をカウントして、入力可能な残り文字数を表示」する機能ができあがります。
上記のHTMLを表示させると、以下のように見えます。
実際に入力欄に何か入力してみて下さい。文字数がリアルタイムに変化するはずです。
あと100文字
あと15文字
なお、同一ページ内に入力欄をいくつ設置する場合でも、JavaScriptソースの記述は1つだけで構いません。 また、カウントアップする関数とカウントダウンする関数は、同一ページで同時に使用可能です。
最後に、これまでのソースのまとめを掲載しておきます。また、スタイルシートで簡単に装飾する方法もご紹介いたします。
