JavaScriptでフォームのテキスト入力エリアに入力された文字数をカウントするためには、対象とするテキストエリアにイベントが発生したときに、文字数をカウントするJavaScriptの関数をコールするようにします。文字数のカウントにはlength関数を使用します。
length関数の使い方
length関数の書式は以下の通りです。length関数は文字数のカウント時に全角半角の区別をしません。
|
1 |
"カウントしたい文字列".length() |
テキストエリアへのイベントの指定方法
テキストエリアで特定のイベントが発生した場合に処理を行う関数の指定は以下のように記述します。
|
1 |
<textarea cols="幅" rows="行数" イベント名="関数;"></textarea> |
関数名の部分には直接スクリプトを記述することもできます。
文字数のカウントに使われるイベントとしては、次のようなものがあります。
| onBlur | テキストエリアからフォーカスが外れた時に発生するイベント |
| onChange | テキストエリアの入力内容が確定された時に発生するイベント |
| onKeyUp | テキストエリア内の入力時にキーをあげたときに発生するイベント |
フォームのテキストエリアに入力された文字数をカウントする
テキストエリアに対するイベントとしては、１番目のテキストエリアにonChangeを、２番目のテキストエリアにはonKeyUpを指定しています。それぞれのイベントには文字数をカウントする関数とカウントした結果を表示するフィールドを指定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
