お手軽高機能！Closure UI【goog.ui.CharCounter】

特集

稲毛 透

2012.10.27

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.CharCounter」は、入力コントロールに入力された文字数をカウントし、指定した要素に表示するウィジェットです。最大文字数を指定することで、「あと何文字入力可能か？」や「今何文字入力されているか？」といった情報をユーザに提供します。

デモ

Sample1は最大文字数を160文字、カウンタの初期表示を入力可能文字の残数表示とし、Sample2は最大文字数を255文字、カウンタの初期表示を入力文字数としています。「Switch Display Mode」ボタンを押下することでカウンタの表示が「INCREMENTAL」と「REMAINING」で切り替わります。

Sample1

Counter:

Sample2

Counter:

デモコード

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」をカウンタへ設定しています。

まとめ

ツイッターの投稿フィールドのように入力文字数に制限のある入力コントロール等に利用すると良いと思います。入力可能文字数がリアルタイムに見て取れる事はとてもユーザフレンドリーですよね。(^^)

参照

*

関連記事

話題の日本酒「ソースコード」を読んで（飲んで）みた

べこみん

2024.02.11

話題の記事

ECMAScript의 해시뱅

lee.byonghun

2024.02.04

ESLintでconsoleの使用をエラーにする

武田隆志

2024.01.31

ドメイン駆動設計を実践して自分の LINE 環境をリファクタリングしてみた（実装編２）

高崎 渉

2024.01.29