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

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

length関数の使い方

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

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

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

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

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

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

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

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

サンプルプログラム


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集

イベント