フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

Character Limitは、フォーム要素に文字制限を設定するためのjQueryプラグインです。本プラグインは非常に軽量です。フォームをWEB上で公開する場合、ユーザーがフリーでテキスト入力を行う場面が多々必要となります。入力文字は少ないですが、名前もフリー入力のひとつです。

一方、問い合わせや要望などの文章を入力する場合には、長文の入力になる可能性があります。そんな時に本プラグインを使用すれば、ユーザーのテキスト入力文字数を制限することができます。そして、ユーザーも何文字入力したのかをリアルタイムで確認することができます。

それでは、Character Limitについて詳しく見ていきましょう。

Character Limit

Character Limitのダウンロードや詳細は以下からどうぞ。実際のデモはファイルをダウンロードして確認できます。

Character Limit

冒頭で、ユーザーがリアルタイムで入力文字数を確認できると述べましたが、Character Limitの基本的な仕様として正確に言い換えると、「あと何文字入力ができるか」を確認しながら入力できるものとなっています。例えば、200文字を最大入力数とすると、入力する度に199.198.197.196….とカウンターが減っていきます。

実装については2段階の方法となります。ステップ１はHTMLのマークアップです。具体的なマークアップは下記になります。

［id=”address”］idは任意のもので構いません。この場合は住所を入力するエリアと示唆しています。

［data-maxchar=”200″］は、［最大入力文字数は200文字］を意味しています。

ステップ２、プラグインをサイトへ読み込みます。下記は、オプションありの場合です。オプションは最大入力の文字数のカウンターを表示したい場合に設定してください。

「オプションなし」の場合は、下記になります。

以上です。非常にシンプルですね。CSSなどで、お好みのデザインを追加しても良いでしょう。