1-2. カウントして表示するJavaScriptを書く

次に、文字数をカウントして表示するためのJavaScriptを記述します。 これは、以下のソースをそのままコピー&ペーストするだけで構いません。(修正不要です。)

<script type="text/javascript"><!--
function ShowLength( idn, str ) {
   document.getElementById(idn).innerHTML = str.length + "文字";
}
// --></script>

上記では、先ほどのonkeyupイベントハンドラで呼び出される「ShowLength」関数を作っています。 処理内容は非常に簡単で、第2引数(str)で渡された文字列の長さ(length)を数えて、 第1引数(idn)で渡された名称でidが振られている要素の内容(innerHTML)を書き換えているだけです。

上記のJavaScriptについて、簡単に解説しておきます。(読み飛ばしても構いません。上記のソースはそのままコピー&ペーストするだけで動きますから。)

●function ShowLength( idn, str ) {

「ShowLength」という関数を作っています。1つ目の引数(idn)は、文字数を表示する要素に割り振られたID名です。 2つ目の引数(str)には、ユーザが入力欄に入力した文字列がそのまま含まれています。

str.length + "文字"

変数strにはユーザが入力した文字列が格納されています。 「str.length」のようにlengthプロパティを参照することで、その文字数が得られます。(例えば、120など) その直後に「文字」という文字列を加えることで、「120文字」などのような文字列ができあがります。
この「文字」という文字列は、何でも自由に書き換えて構いません。「もじ」に書き換えれば「120もじ」などのように表示されます。何でも記述できますが、引用符で囲むのを忘れないで下さい。

●document.getElementById(idn).innerHTML

あとは、getElementByIdメソッドにID名(idn変数)を渡すことで出力位置を特定し、 innerHTMLプロパティを使って、対象の要素の内容を書き換えています。
※したがって、getElementByIdメソッドやinnerHTMLプロパティの扱えない、かなり古いブラウザでは動きません。

以上で、テキストエディタのステータスバーなどのように、「入力された文字列の数をカウントして表示」する機能ができあがります。

上記のHTML・JavaScriptを表示させると、以下のように見えます。
実際に入力欄に何か入力してみて下さい。文字数がリアルタイムに変化するはずです。

0文字

0文字

なお、同一ページ内に入力欄をいくつ設置する場合でも、JavaScriptソースの記述は1つだけで構いません。

次に、指定した文字数からカウントダウンして表示するソースをご紹介いたします。

指定文字数からカウントダウンする場合のソースへ >>