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();

slider MenuメニューリストをスライダーメニューにするjQueryプラグイン「slider Menu」前のページ

スライド式のタイムラインを実装できるjQueryプラグイン「Timeline.js」次のページTimeline.js

関連記事

  1. no-image
  2. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  3. jQuery Responsive Tabs
  4. Rollerblade.js

    JavaScript

    画像を360度回転させて見せることができるjQueryプラグイン「Rollerblade.js」

    Rollerblade.jsというjQueryプラグインを使えば、画像…

  5. Ideal Image Slider

    JavaScript

    シンプルで動きが滑らかなスライダー「Ideal Image Slider」

    Ideal Image Sliderはレスポンシブに対応したシンプルで…

  6. Square Menu

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP