no-image

JavaScript

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

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

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

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

Character Limit

Character Limit

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

<div class="text-limiter">
<textarea class="form-control" id="address" placeholder="Enter your address" rows="5" data-maxchar="200"></textarea>
  <span class="pull-right">
   <em>max. character allowed are</em>
    <em class="character-counter"></em>
  </span>
</div>

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

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

var options = {
  counter: 'some-class-to-add'
};
$('FORM_ELEMENT_01, FORM_ELEMENT_02').characterlimit(options);
$('FORM_ELEMENT_01, FORM_ELEMENT_02').characterlimit();

関連記事

  1. How To Create A Simple Image Slideshow

    JavaScript

    チルトエフェクトがオシャレなスライドショー「How To Create A Simple Image…

    オシャレなチルトエフェクトにダイナミックなイメージスライダーを実装でき…

  2. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  3. imgViewer2

    JavaScript

    画像のズームとパン機能を備えたjQueryプラグイン「imgViewer2」

    imgViewer2は画像のズームとパン機能を備えたjQueryプラグ…

  4. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  5. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  6. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

最近の記事

  1. ACC-TRBX
  2. ピスタチオ クリスマス ツリー フラペチーノ
  3. SF-G64T
  4. USB Type-C搭載ドッキングステーション

Facebookページ

PAGE TOP