prototype-scriptaculous-hint-text.js

//
// prototype-scriptaculous-hint-text.js | by Rick Branson -- Released into the public domain.
//
//   Adds placeholder text above an input. Fades in and out. Is sexy. No kids. Not tested in IE (yet).
//
// $(element).hintText("string", {
//     hiddenOpacity:   the opacity of the placeholder text when it's hidden.  (0.0 to 1.0)
//     shownOpacity:    the opacity of the placeholder text when it's shown.   (0.0 to 1.0)
//     effectDuration:  the length (in seconds) of the fading effect, 0 turns it off.
//     textPadding:     the amount of text padding to use if none is explicitly set on
//                      the input style.
// });
//
//

(function(){
  var methods = {
    hintText: function(element, text, opts) {
      element = $(element);
      var options = {
        hiddenOpacity:    0.0,
        shownOpacity:     0.5,
        effectDuration:   0.2,
        textPadding:      7
      };
      Object.extend(options, opts || { });
      
      // what we have to do is create a container element, then wrap
      // our text box in it, then append the hint text element to the
      // container, so that everything behaves properly across the
      // various browsers.
      
      var containerElem  = new Element("DIV");
      var hintElem       = new Element("SPAN");
      
      element.wrap(containerElem);
      containerElem.setStyle({position: "relative", width: element.width, height: element.height});
      containerElem.appendChild(hintElem);
            
      hintElem.setStyle({
        position: "absolute",
        left: (element.positionedOffset().left +
                parseInt(element.style.paddingLeft || element.style.padding || options.textPadding))
                + "px",
        top:  (element.positionedOffset().top +
                parseInt(element.style.paddingTop || element.style.padding || options.textPadding))
                + "px"
      });
      hintElem.innerHTML = text;
      hintElem.setOpacity(options.shownOpacity);
          
      // hide the hint elem if we've already got something in the input
      document.observe("dom:loaded", function() {
        // this is a hack to make it work with password remembering things 
        setTimeout(function() {
          if (element.value.strip() != "")
            hintElem.hide();
        }, 100);
      });
      
      // so if the user clicks on the placeholder, we still get notified.
      hintElem.observe("click", function() { element.focus(); });

      return element.observe('focus', function() {
        hintElem.fade({
          from: options.shownOpacity,
          to: options.hiddenOpacity,
          duration: options.effectDuration
        });
      }).observe('blur', function(){
        if (element.value.strip() == "") {
          hintElem.appear({
            from: options.hiddenOpacity,
            to: options.shownOpacity,
            duration: options.effectDuration
          });
        }
      });
    }
  };
   
  $w('input').each(function(tag){ Element.addMethods(tag, methods) });
})();