この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Closure Libraryに用意されている「goog.ui.CharCounter」は、入力コントロールに入力された文字数をカウントし、指定した要素に表示するウィジェットです。最大文字数を指定することで、「あと何文字入力可能か?」や「今何文字入力されているか?」といった情報をユーザに提供します。
デモ
Sample1は最大文字数を160文字、カウンタの初期表示を入力可能文字の残数表示とし、Sample2は最大文字数を255文字、カウンタの初期表示を入力文字数としています。「Switch Display Mode」ボタンを押下することでカウンタの表示が「INCREMENTAL」と「REMAINING」で切り替わります。
デモコード
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>goog.ui.CharCounter</title>
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.ui.CharCounter');
</script>
</head>
<body>
<fieldset class="custom">
<legend>Sample1</legend>
Counter:<span id="counter1"></span>
<button id="button1">Switch Display Mode</button><br />
<input type="text" id="textinput">
</fieldset>
<fieldset class="custom">
<legend>Sample2</legend>
Counter:<span id="counter2"></span>
<button id="button2">Switch Display Mode</button><br />
<textarea id="textarea"></textarea><br />
</fieldset>
<script>
goog.scope(function() {
var getElement = goog.dom.getElement;
var listen = goog.events.listen;
var EventType = goog.events.EventType;
var CharCounter = goog.ui.CharCounter;
var counter1 = new CharCounter(
getElement('textinput'),
getElement('counter1'),
160);
listen(getElement('button1'),
EventType.CLICK,
function(event) {
var isRemainingMode = counter1.getDisplayMode() == CharCounter.Display.REMAINING;
counter1.setDisplayMode(isRemainingMode ? CharCounter.Display.INCREMENTAL : CharCounter.Display.REMAINING);
}
);
var counter2 = new CharCounter(
getElement('textarea'),
getElement('counter2'),
255,
CharCounter.Display.INCREMENTAL);
listen(getElement('button2'),
EventType.CLICK,
function(event) {
var isRemainingMode = counter2.getDisplayMode() == CharCounter.Display.REMAINING;
counter2.setDisplayMode(isRemainingMode ? CharCounter.Display.INCREMENTAL : CharCounter.Display.REMAINING);
}
);
});
</script>
</body>
</html>
使い方
コンストラクタ引数に、カウント対象の要素、カウンタを表示する要素、最大文字数を指定してCharCounterクラスのインスタンスを生成します。第4引数にはオプションでカウンタの表示モード(REMAININGかINCREMENTALか)を指定できます。
Closure Libraryのロード
<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.ui.CharCounter');
</script>
- 6行目
- Closure Libraryのbase.jsをロードします。
(このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。) - 7~12行目
- 必要とするClosure Libraryを宣言します。
カウント対象とカウンター
<fieldset class="custom">
<legend>Sample1</legend>
Counter:<span id="counter1"></span>
<button id="button1">Switch Display Mode</button><br />
<input type="text" id="textinput">
</fieldset>
<fieldset class="custom">
<legend>Sample2</legend>
Counter:<span id="counter2"></span>
<button id="button2">Switch Display Mode</button><br />
<textarea id="textarea"></textarea><br />
</fieldset>
- 17行目
- 「ID:textinput」の文字をカウントした結果を表示する為のspan要素です。
- 18行目
- 「ID:textinput」に設定したCharCounterの表示モードを切り替える為のbutton要素です。
- 19行目
- カウント対象のinput要素です。
- 23行目
- 「ID:textarea」の文字をカウントした結果を表示する為のspan要素です。
- 24行目
- 「ID:textarea」に設定したCharCounterの表示モードを切り替える為のbutton要素です。
- 25行目
- カウント対象のtextarea要素です。
CharCounterオブジェクトの生成
入力を簡便にする為、クラスおよびグローバルメソッドを一時変数へ代入しています。
goog.scope(function() {
var getElement = goog.dom.getElement;
var listen = goog.events.listen;
var EventType = goog.events.EventType;
var CharCounter = goog.ui.CharCounter;
var counter1 = new CharCounter(
getElement('textinput'),
getElement('counter1'),
160);
listen(getElement('button1'),
EventType.CLICK,
function(event) {
var isRemainingMode = counter1.getDisplayMode() == CharCounter.Display.REMAINING;
counter1.setDisplayMode(isRemainingMode ? CharCounter.Display.INCREMENTAL : CharCounter.Display.REMAINING);
}
);
var counter2 = new CharCounter(
getElement('textarea'),
getElement('counter2'),
255,
CharCounter.Display.INCREMENTAL);
listen(getElement('button2'),
EventType.CLICK,
function(event) {
var isRemainingMode = counter2.getDisplayMode() == CharCounter.Display.REMAINING;
counter2.setDisplayMode(isRemainingMode ? CharCounter.Display.INCREMENTAL : CharCounter.Display.REMAINING);
}
);
});
- 34~37行目
- CharCounterオブジェクトを生成しています。ターゲットとする入力コントロールは「ID:textinput」の要素、カウンタを表示するのは「ID:counter1」の要素、最大文字数は160文字としています。
- 39~45行目
- カウンタの表示モードを切り替える為のイベントハンドラを設定しています。カウンタの表示モードを取得して「REMAINING」だったら「INCREMENTAL」そうでなければ「REMAINING」をカウンタへ設定しています。
- 47~51行目
- CharCounterオブジェクトを生成しています。ターゲットとする入力コントロールは「ID:textarea」の要素、カウンタを表示するのは「ID:counter2」の要素、最大文字数は255文字、オプションとして表示モードをINCREMENTALとしています。
- 53~59行目
- カウンタの表示モードを切り替える為のイベントハンドラを設定しています。カウンタの表示モードを取得して「REMAINING」だったら「INCREMENTAL」そうでなければ「REMAINING」をカウンタへ設定しています。
まとめ
ツイッターの投稿フィールドのように入力文字数に制限のある入力コントロール等に利用すると良いと思います。入力可能文字数がリアルタイムに見て取れる事はとてもユーザフレンドリーですよね。(^^)