テキスト入力欄の文字数をリアルタイム表示(4ページ目)

2-1. カウントダウン表示用のHTMLを書く

まずは、HTMLで入力欄と文字数表示領域を作ります。これは、カウントダウンでもカウントアップでもほとんど同じです。 下記のようにtextarea要素（またはinput要素）とp要素を使うだけです。
※試しに使ってみるだけなら、何も書き換えずにコピー＆ペーストするだけで使えます。

複数行入力欄の場合：

1行入力欄の場合：

●<textarea cols="桁数" rows="行数"></textarea>

複数行の入力欄は、textarea要素で作れます。この部分は先ほどと同じです。

●<input type="text" …… maxlength="最大文字数">

1行入力欄は、input要素で作ります。これも先ほどと同じです。1行入力欄の場合は、maxlength属性を使うことで入力可能な最大文字数を指定できます。 必要なければ属性名ごと値の記述を省略できます。

●<p id="ID名">あと100文字</p>

p要素の記述も、先ほどとほとんど同じです。先ほどは「0文字」と記述していましたが、ここではカウントダウンを始めたい数字を記述しておきます。

●onkeyup="CountDownLength( 'ID名' , value , 指定文字数 );"

onkeyup属性で呼び出している「CountDownLength」という関数は、次のページで作ります。
先ほどのShowLength関数とは異なり、引数には、「'cdlength1'」と「value」と「100」などの3つの値を渡しています。
最初の「'cdlength1'」は、p要素のid属性の値と必ず一致させます。 値は、引用符（シングルクオーテーション）で囲むのを忘れないで下さい。 ここまでは先ほどと同じです。
今回は、さらに3つ目の引数で、カウントダウンを開始する文字数を指定します。「100」を指定すれば100からカウントダウンし、「15」を指定すれば15からカウントダウンします。
2つ目の引数「value」は、先ほどと同様に修正不要です。

上記のHTMLを表示させると、以下のように見えます。
現状では、実行するスクリプトを記述していないので、入力しても表示は変化しません。（ブラウザによっては、エラーメッセージが表示されます。）

HTMLの記述は以上です。
次に、JavaScriptを記述しましょう。

カウントダウンして表示するJavaScriptソースへ >>