知っていると便利！　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>

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.js"></script>
<script src="bootstrap-maxlength.js"></script>

$('#sample').maxlength({
  alwaysShow: true
});

まとめ

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