知っていると便利! BootStrap Maxlengthによる文字列のカウントアップ

こんにちは。樋口です。
 
本日は、javaScriptライブラリである、BootStrap Maxlengthについてご紹介します。このライブラリを使用することにより、対象Inputエリアの入力文字数・入力可能最大文字数を表示することができます。
 
今回は下記ライブラリを使用して説明をしていきます。

目次

  1. 使用環境
  2. ライブラリの読み込み
  3. 文字列のカウントアップを実装
jQuery
1.10.2
BootStrap(CSS使用)
3.2.0
BootStrap Maxlength
1.6.0

BootStrap Maxlengthの使用は下記公式サイトよりダウンロードできます。
BootStrap Maxlength公式サイト
 
ダウンロード後ライブラリを読み込むことにより使用可能となります。ライブラリパスは、自身の設置したものを記載してください。

まずは、下記のテキストエリアを作成します。ここで指定した、maxlengthの数が文字カウントの最大入力可能値になります。

<form name="baseForm" id="baseForm" method="post">
  <input type="text" class="sample" id="sample" name="sample" maxlength="20" value="" >
</form>

次に先ほどダウンロードしたライブラリと、jQuery、BootStrapのCSSを読み込みます。
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.js"></script>
<script src="bootstrap-maxlength.js"></script>

最後に文字カウントを付けたいエリアに、jQueryより初期化を行います。
$('#sample').maxlength({
  alwaysShow: true
});

これで文字カウントの設定は完了です。
 
Bootstrap Maxlength画像

まとめ

今回紹介したライブラリの他にもjavaScript関連のライブラリはたくさんありますので、今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

記事をシェア
MOST VIEWED ARTICLES