TextBoxWatermark

Atlas.NET覗いていたら、テキストボックスに入力してもらいたい内容を表示しておき、フォーカスがあたると消すというデモンストレーションが載っていた。
http://atlas.asp.net/atlastoolkit/TextBoxWatermark/TextBoxWatermark.aspx

英名で「Watermark」、「すかし」なんていう意味もあるようだ。
これくらいなら実装できるかなと思ってJavaScriptを書いてみた。

ライブラリとしてprototype.jsを使ってます。

TextBoxWatermark = Class.create();
TextBoxWatermark.prototype = {
  initialize: function(element) {
    this.element = $(element);
    this.options = Object.extend({
      watermark_text: '',       /* すかし文字          */
      css_class: 'watermark'    /* すかし時のCSSクラス */
    }, arguments[1] || {});
    
    //F5更新の場合など、テキストはキャッシュされるのでウォーターマークと同じ場合も処理が必要。
    if (this.element.value == '' ||
        this.element.value == this.options.watermark_text)
      this._convertPlaneToWatermark();
    
    Event.observe(this.element, 'focus', this._handler.bind(this), false);
    Event.observe(this.element, 'blur', this._handler.bind(this), false);
  },
  _handler: function() {
    if (this.element.value == '')
      this._convertPlaneToWatermark();
    else
      this._convertWatermarkToPlane();
  },
  _convertPlaneToWatermark: function() {
    var element = this.element;
    this.prev = element.className;
    element.className = this.options.css_class;
    element.value = this.options.watermark_text
  },
  _convertWatermarkToPlane: function() {
    this.element.className = this.prev;
    if (this.element.value == this.options.watermark_text)
      this.element.value = '';
  }
};