Spartan "placeholder" functionality for IE8-9 Works on text inputs only. Uses querySelectorAll, so IE8+ Usage: include <script src="placeholder.js" data-placeholderjs-color="#a8a8a8"></script> at the bottom of a page (color attribute is optional)

spartan placeholder shim

/**
*
* @author petter.envall@gmail.com 
* @date October 2013
*
* Spartan "placeholder" functionality for IE8-9
*
* Works on text inputs only. Uses querySelectorAll, so IE8+
*
* Usage:
*   include <script src="placeholder.js" data-placeholderjs-color="#a8a8a8"></script>
*   at the bottom of a page (color attribute is optional)
*
*/
;(function () {

  var win = this, doc = this.document
    , placeholderDataAttributeName = "data-ph-apply"
    , placeholderAttributeName = "placeholder"
    , placeHolderTextColor = "#aaa"
    , supportsPlaceholder = (placeholderAttributeName in doc.createElement("input"));

  if (supportsPlaceholder) {return;} // Nothing to do here!

  (function () { // obtain the (optional) custom placeholder text color
    var attr = "data-placeholderjs-color"
      , script = doc.querySelector("script["+attr+"]");
    script && (placeHolderTextColor = script.getAttribute(attr));
  })();

  // basic event abstraction
  var Event = (function () {
    var listen = (function () {
      return "function" == typeof doc.body.addEventListener ?
        function (elem, name, handler, capture) {
          elem.addEventListener(name, handler, !!capture);
        } :
        function (elem, name, handler) {
          elem.attachEvent("on"+name, function (event) {
            event || (event = win.event);
            event.target || (event.target = event.srcElement);
            handler(event);
          });
        };
      })()
      , prevent = function (e) {
        if ("preventDefault" in e) {prevent = function (e) {e.preventDefault();};}
        else {prevent = function (e) {e.returnValue = false;};}
        prevent(e);
      };

    return {
      "listen": listen
      , "prevent": prevent
    };
  })();

  var supportsFocusin = (function () { // will use focusin OR event's capturing phase
      var result = false, a = doc.createElement("a");
      a.href= "#";
      Event.listen(a, "focusin", function () {result = true;});
      doc.body.appendChild(a);
      a.focus();
      doc.body.removeChild(a);
      return result;
    })();

  var inputs = doc.querySelectorAll("input[type=text]");
  for (var idx=0, len=inputs.length; idx<len; ++idx) { // initialize state for placeholder inputs
    var input = inputs[idx]
      , phAttr = getAttr(input, placeholderAttributeName);
    if (!phAttr) {continue;}
    var value = input.value;
    if (value) {continue;}
    setAttr(input, placeholderDataAttributeName, "true");
    applyPlaceholder(input, phAttr);
  }

  function getAttr(input, attr) {return input.getAttribute(attr);}
  function setAttr(input, attr, value) {input.setAttribute(attr, value);}
  function applyPlaceholder(input, text) {
    input.value = text;
    input.style.color = placeHolderTextColor;
  }

  var eventName = "focus"+(supportsFocusin?"in":"");
  Event.listen(doc.body, eventName, function (e) { // focus handling
    e || (e = win.event);
    var target = e.target
      , phAttr = getAttr(target, placeholderAttributeName);
    if (!phAttr) {return;}
    var applyPh = getAttr(target, placeholderDataAttributeName);
    "true"==applyPh && (target.value = "");
    target.style.color = "";
  }, !supportsFocusin);

  eventName = supportsFocusin?"focusout":"blur";
  Event.listen(doc.body, eventName, function (e) { // blur handling
    e || (e = win.event);
    var target = e.target
      , phAttr = getAttr(target, placeholderAttributeName);
    if (!phAttr) {return;}
    var blank = !target.value;
    setAttr(target, placeholderDataAttributeName, blank);
    blank && applyPlaceholder(target, phAttr);
  }, !supportsFocusin);

  Event.listen(win, "unload", function () {
    var inputs = doc.querySelectorAll("input["+placeholderAttributeName+"]");
    for (var idx=0, len=inputs.length; idx<len; ++idx) {
      var input = inputs[idx];
      "true"==getAttr(input, placeholderDataAttributeName) && (input.value = "");
    }
  });

})();