JavaScriptでフォームの文字数をカウントする方法

JavaScriptでフォームのテキスト入力エリアに入力された文字数をカウントするためには、対象とするテキストエリアにイベントが発生したときに、文字数をカウントするJavaScriptの関数をコールするようにします。文字数のカウントにはlength関数を使用します。

length関数の使い方

length関数の書式は以下の通りです。length関数は文字数のカウント時に全角半角の区別をしません。

"カウントしたい文字列".length()

テキストエリアへのイベントの指定方法

テキストエリアで特定のイベントが発生した場合に処理を行う関数の指定は以下のように記述します。

<textarea cols="幅" rows="行数" イベント名="関数;"></textarea>

関数名の部分には直接スクリプトを記述することもできます。

文字数のカウントに使われるイベントとしては、次のようなものがあります。

onBlurテキストエリアからフォーカスが外れた時に発生するイベント
onChangeテキストエリアの入力内容が確定された時に発生するイベント
onKeyUpテキストエリア内の入力時にキーをあげたときに発生するイベント

フォームのテキストエリアに入力された文字数をカウントする

テキストエリアに対するイベントとしては、1番目のテキストエリアにonChangeを、2番目のテキストエリアにはonKeyUpを指定しています。それぞれのイベントには文字数をカウントする関数とカウントした結果を表示するフィールドを指定しています。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script language="JavaScript" type="text/JavaScript">
      function countLength( text, field ) {
        document.getElementById(field).innerHTML = text.length;
      }
    </script>
  </head>

  <body>
    <p>onChange時に文字数をカウント</p>
    <textarea cols="20" rows="1" onChange="countLength(value, 'textlength1');"></textarea>
    <p id="textlength1">0</p>
    <p>onKeyUp時に文字数をカウント</p>
    <textarea cols="20" rows="1" onKeyUp="countLength(value, 'textlength2');"></textarea>
    <p id="textlength2">0</p>
  </body>
</html>

サンプルプログラム