JSFiddle - React, Tailwind, and code Playground

by jwestbrook

HTML

<form>
  <input type="text" class="watermark" title="My Default Data" />
</form>

CSS

div.watermarked {
   font-size: 12px;
   position:absolute;
   display: block;
   color: #999;
}

JavaScript

/*
* http://github.com/jwestbrook/Prototype.Watermark
*/
var Watermark=Class.create({initialize:function(a,c,d){this.el=$(a);this.watermarkEl=(new Element("div",{"class":"watermarked"})).update(c);d?(this.el.observe("focus",function(){this.watermarkEl.setStyle({textAlign:"right"})}.bind(this)),this.el.observe("keydown",this.hide.bind(this)),this.watermarkEl.setStyle({width:this.el.getWidth()-2*this.el.paddingLeft()-2*this.el.marginLeft()+"px"})):this.el.observe("focus",this.hide.bind(this));this.el.observe("blur",this.show.bind(this));this.el.observe("change",
function(){this.canShow()?this.show():this.hide()}.bind(this));this.watermarkEl.setStyle({display:"none",fontSize:this.el.getStyle("fontSize"),fontFamily:this.el.getStyle("fontFamily"),lineHeight:this.el.getStyle("lineHeight"),paddingLeft:this.el.getStyle("paddingLeft"),paddingTop:this.el.getStyle("paddingTop"),marginLeft:this.el.getStyle("marginLeft"),marginTop:this.el.getStyle("marginTop")});this.watermarkEl.observe("click",function(){this.el.focus()}.bind(this));a=new Element("div",{style:"position:relative;"});
a.insert(this.watermarkEl);Element.wrap(this.el,a);this.el.disabled=!1;a=this.el.up("form");Object.isElement(a)&&a.observe("reset",function(){this.show.bind(this).defer()}.bind(this));this.show()},show:function(){this.watermarkEl.setStyle({textAlign:"left"});this.canShow()&&(this.el.setValue(""),this.watermarkEl.show())},hide:function(){this.isActivated()&&this.watermarkEl.hide()},canShow:function(){return!this.isActivated()&&this.el.getValue().blank()},isActivated:function(){return this.watermarkEl.visible()}});
Element.addMethods(["INPUT","TEXTAREA"],{watermark:function(a,c,d){var b=a.retrieve("watermark");b||(b=new Watermark(a,c||a.readAttribute("title"),d),a.store("watermark",b));return b}});document.observe("dom:loaded",function(){$$(".watermark").each(function(a){a.watermark()})});