jQueryを使った入力文字数カウンタープラグインinputCountを作りました

jQuery

jQueryを使っていると、毎回同じような記述をしている事に気がつきます。少しでも汎用的に作れないか、と思っていろいろ試行錯誤しています。今回jQueryを使った入力文字数カウンタープラグインinputCountを作ってみました。実は初プラグイン制作ですw

確認環境

  • jQuery1.9.0、1.7.2で動作確認

使い方

  • jQuery本体とinputCountを読み込みます。
  • input要素またはtextarea要素に識別IDを割り振っておきます。
  • カウンターを表示したい要素も作っておきます。
  • inputCountをカウントしたいフォームに対して使用します。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery文字数カウンタープラグインinputCount - サンプル</title>
</head>
<body>
<p>
<span class="count">0</span><br />
<input type="text" id="name" />
</p>
<p>
<span class="count2">0</span><br />
<textarea id="message"></textarea>
</p>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.inputCount.js"></script>
<script>
$(function(){
    $('#name').inputCount({element: '.count'});
    $('#message').inputCount({element: '.count2'});
});
</script>
</body>
</html>

注意点

  • inputCountにはオプション設定が1つあります。カウンターを表示したい要素(classまたはid)の指定です。何も設定しない場合は.countクラスになります。
//.countクラスにカウント数を表示
$('#name').inputCount();
//.count2クラスにカウント数を表示
$('#message').inputCount({element: '.count2'});

デモ

inputCountデモ

ダウンロード

ダウンロード

タイトルとURLをコピーしました