AMG Solution

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

 
こんにちは。樋口です。

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

使用環境

jQuery
1.10.2
BootStrap(CSS使用)
3.2.0
BootStrap Maxlength
1.6.0

 

1. ライブラリの読み込み

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

2. 文字列のカウントアップを実装

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

次に先ほどダウンロードしたライブラリと、jQuery、BootStrapのCSSを読み込みます。

最後に文字カウントを付けたいエリアに、jQueryより初期化を行います。

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

3. まとめ

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

HIGUCHI'S BLOG

樋口の記事

樋口の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

新卒採用
はじめました。
LOADING