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. JavaScript

    1つのテキストリンクから複数のリンク先が表示される「μllinx」

    μllinx(mullinx)は1つのテキストリンクから複数のリンク先…

  2. Scroll To Top Then Fixed Navigation Effect With jQuery and CSS
  3. Before and After image script
  4. Filterizr

    JavaScript

    ソートやシャッフルができるギャラリーを実装するjQueryプラグイン「Filterizr」

    Filterizrはソートやシャッフルができるレスポンシブに対応したギ…

  5. no-image

    JavaScript

    シンプルなイメージカルーセルを実装できる「Boishakh carousel」

    Boishakh carouselはシンプルなイメージカルーセルを実装…

  6. GRT Responsive Menu

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP