テキストボックスの残り入力文字数をシンプルに表示するjQueryプラグイン m5simpleTextCount

テキスト入力エリアなどの残り入力文字数をシンプルに表示するjQueryプラグインです。使い方も簡単で、指定要素に入力文字数と一緒に実行するだけです。

動作サンプル

必要なファイルを読み込む

jQueryとm5simpleTextCount.jsを読み込みます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/simpletextcount.js"></script>

任意の要素に対して実行する

任意のinput, textareaに対して実行します。

HTML

<input type="password" class="simpleTextCount" value="" />
<textarea class="simpleTextCount" cols="5" rows="5"></textarea>

JS

jQuery(function($) {
  $('.simpleTextCount').simpleTextCount({
    maxLength: 12
  });
});

ちなみにm5simpleTextCountを実行したinput要素はpaddingRight、textarea要素はpaddingRight, paddingBottomに適当な数値を当てたほうがいいと思いますよ！(そこは手動やねんで・・・

オプション

オプションを指定するデフォルトの文字・背景色、残り文字数が少なくなったときの文字・背景色などを任意に指定できます。全て残り文字数を表示する要素が対象です。

$('.simpleTextCount').simpleTextCount({
  atColor: '#fff',
  atBackground: '#000',
  alertLength: 5,
  maxLength: 12
});

name	value
focusDisplay	trueを指定するとフォーカスしたときだけ残り文字数を表示する (def – false
padding	padding (def – ’3px’
color	文字色 (def – ‘#000′
background	背景色 (def – ‘#eee’
fontWeight	文字の太さ (def – ‘normal’
atColor	少なくなったときの文字色 (def – ‘#f00′
atBackground	少なくなったときの背景色 (def – ‘#eee’
atFontWeight	少なくなったときの文字の太さ (def – ‘bold’
opacity	透過度 (def – .8
alertLength	スタイルを変える文字数 (def – 0
maxLength	残り入力文字数 (def – 10

ひとりごと

exValidationの文字数制限バリデーションと併用したくて作ったので、併用するといい気がします。機能をモジュールにしたほうがいい気もしてきた