フォーム入力などで文字数制限がある場合、入力している時に現在の文字数がリアルタイムで表示されると非常に親切です。

 

ここでは、jQueryのカウンタースクリプトによるリアルタイムの文字数表示を実現するプログラムについてみていきましょう。

 

文字カウンタースクリプト関数

対象の文字数をリアルタイムにカウントする関数は、以下のような記述となります。

 

引数に対象となる要素名を引き渡すことによって、その対象要素の文字数をカウントします。

対象要素のkeyupまたはchangeイベントが走った時に、setCounter()が走り、文字数の表記が書き換わります。

 

リアルタイムに文字カウントを行う関数

 

関数の呼び出し(対象引数の引き渡し例)

 

 

おすすめの記事