2007-07-03 (Tue)

入力文字数の制限を可視化する JavaScript

好評の、読み込ませるだけシリーズ の8番目。

maxlength 属性とかアプリケーション側とかでフォームの入力文字数を制限していても、ユーザにとっては自分が何文字くらい入力したかがわからないと不便そうなので、汎用的なのを作りました。

フォームにフォーカスが当たると、入力した文字数と入力可能な文字数が表示され、リアルタイムに更新されていきます。

コードは次の通りでして、prototype.js(1.5.0くらい) に依存してます。

var VisualLength = Class.create();
VisualLength.prototype = {
  initialize: function(attribute) {
    this.fields = ['INPUT', 'TEXTAREA'];
    this.attribute = attribute || 'maxlength';
    this.ignore = '__'+this.attribute;
    this.scan();
    this.create();
  },

  create: function() {
    this.box = Element.extend(document.createElement('div'));
    this.box.setStyle({ position: 'absolute', backgroundColor: '#FFF', border: '1px solid #DDD', display: 'none' });
    document.body.appendChild(this.box);
  },

  show: function(e) {
    this.target = Event.element(e);
    this.max = this.target.getAttribute(this.attribute);
    this.checker();

    Position.clone(this.target, this.box);
    var top = parseInt(this.box.style.top) - 30;
    this.box.setStyle({ width: '5em', height: '1.5em', top: top+'px' }); 
    this.box.show();
  },

  hide: function() {
    this.box.hide();
  },

  checker: function() {
    var len = this.target.value.length;
    if(len > this.max)
      len = '<font color="red">'+len+'</font>';
    this.box.innerHTML = len + '/' + this.max;
  },

  scan: function(parent) {
    parent = parent || document;
    for(var t, i = 0; t = this.fields[i]; i++) {
      this.parse(parent.getElementsByTagName(t));
    }
  },

  parse: function(elms) {
    for(var elm, i = 0; elm = elms[i]; i++) {
      if(elm.getAttribute(this.attribute)) {
        if(elm.getAttribute(this.ignore)) continue;
        Event.observe(elm, 'focus', this.show.bind(this));
        Event.observe(elm, 'blur', this.hide.bind(this));
        Event.observe(elm, 'keydown', this.checker.bind(this));
        Event.observe(elm, 'keyup', this.checker.bind(this));
        elm.setAttribute(this.ignore, 'true');
      }
    }
  }
};

ここまでが共通部分で、window.onload のタイミングとかで new VisualLength してやるだけで、HTML 内の maxlength 属性がついてる要素をいじってくれます。

Event.observe(window, 'load', function() {
   new VisualLength();
});

maxlength 属性を使いたくない場合には、VisualLength の引数に任意の属性を指定すれば大丈夫。

Event.observe(window, 'load', function() {
   new VisualLength('length');
});

動的に要素を追加したりする場合も考慮してまして、そんな場合は VisualLength#scan を手動で実行すればいいんだけど…。サンプル作るのめんどうなのでコード読んで下さい、すいません。

文字数の取得タイミングは keyup, down でうまく取れるかあんまり検証してないので、あとで変えるかもしれません。タイマー使った処理が綺麗に書けそうなら、それもいいかな。 あと、なんか見た目がシンプル過ぎて逆にわかりにくくなりそうなので、見栄えもいじるかも。

Posted by Kyosuke Takayama at 2007-07-03 (Tue) 18:46 printable version

この記事へのコメント

コメントはお気軽にどうぞ

Cookie に保存しますか?


・スパム対策のため、http:// を含むコメントの投稿は出来ません。
・スパムチェックのため、投稿がすぐに反映されない場合があります。
・メールアドレス入力欄には何も入力しないでください。

トラックバック

トラックバックURL: http://espion.just-size.jp/mt-tb.cgi/677

Bugle Diary: [javascript]文字数カウント like twitter (2008-09-09 (Tue) 22:45) 0%

マッシュアップの作品で、twitterのような文字カウントを実装したいなと思ってぐぐっ



この記事のリンク元

 
Copyright (C) Kyosuke Takayama, All rights reserved.