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 = ''; } };