autofocus and placeholder support

gistfile1.js

/** 
 * Add this script to the end of your document that use <input autofocus type="text" /> 
 * or <input type="text" placeholder="username" /> and it'll plug support for browser
 * without these attributes
 * Minified version at the bottom
 */
(function () {

function each(list, fn) {
  var l = list.length;
  for (var i = 0; i < l; i++) {
    if (fn.call(list[i], list[i], i, list) === false) {
      break;
    }
  }
}

var addEvent = (function () {
  if (document.addEventListener) {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.addEventListener(type, fn, false);
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  } else {
    return function (el, type, fn) {
      if (el && el.nodeName || el === window) {
        el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
      } else if (el && el.length) {
        for (var i = 0; i < el.length; i++) {
          addEvent(el[i], type, fn);
        }
      }
    };
  }
})();

var i = document.createElement('input'), 
    inputs = [].slice.call(document.getElementsByTagName('input'), 0);

inputs = inputs.concat([].slice.call(document.getElementsByTagName('textarea'), 0));

if (!('placeholder' in i)) {
  // placeholder fix
  each(inputs, function (el) {
    // note - we're using el instead of this across the board because it compresses better
    var lastValue = el.value, placeholder = el.getAttribute('placeholder');
    
    var focus = function () {
      if (el.value == placeholder) {
        el.value = '';
        el.style.color = '';
      }
    };

    var blur = function () {
      if (el.value == '') {
        el.value = placeholder;
        el.style.color = '#A29797';
      }
    };
    
    addEvent(el, 'focus', focus);
    addEvent(el, 'blur', blur);
    
    // remove the placeholder if the page is reload or the form is submitted
    addEvent(el.form, 'submit', function () { focus.call(el); });
    addEvent(window, 'unload', function () { focus.call(el); });
    
    // set the default state
    if (el.value == '') {
      blur.call(el);
    }
  });
}

if (!('autofocus' in i)) {
  // auto focus
  each(inputs, function (el) {
    if (el.getAttribute('autofocus') != null) {
      el.focus();
      return false; // "there can only be one"
    }
  });
}
  
})();

gistfile2.js

// minified
(function(f,g){function i(a,d){for(var c=a.length,b=0;b<c;b++)if(d.call(a[b],a[b],b,a)===false)break}var e=function(){return g.addEventListener?function(a,d,c){if(a&&a.nodeName||a===f)a.addEventListener(d,c,false);else if(a&&a.length)for(var b=0;b<a.length;b++)e(a[b],d,c)}:function(a,d,c){if(a&&a.nodeName||a===f)a.attachEvent("on"+d,function(){return c.call(a,f.event)});else if(a&&a.length)for(var b=0;b<a.length;b++)e(a[b],d,c)}}(),j=g.createElement("input"),h=[].slice.call(g.getElementsByTagName("input"),
0);h=h.concat([].slice.call(g.getElementsByTagName("textarea"),0));"placeholder"in j||i(h,function(a){var d=a.getAttribute("placeholder");function c(){if(a.value==d){a.value="";a.style.color=""}}function b(){if(a.value==""){a.value=d;a.style.color="#A29797"}}e(a,"focus",c);e(a,"blur",b);e(a.form,"submit",function(){c.call(a)});e(f,"unload",function(){c.call(a)});a.value==""&&b.call(a)});"autofocus"in j||i(h,function(a){if(a.getAttribute("autofocus")!=null){a.focus();return false}})})(this,document);

@mathiasbynens - I can't seem to replicate the bug in FF3.6.6 - have you got a specific pattern of user input I can test to replicate?

Also - I don't see how the placeholder.js would work in IE8 (I've not tested it yet, so I might be eating my words), but it uses HTMLElement.prototype - which isn't available in IE, and it's using addEventListener which isn't available in IE8 and below...

@remy: I tested it using the page I linked to before, in Firefox 3.6.8 this time. Same result. Here’s a short screencast: http://screenr.com/JJX Please tell me if I’m doing it wrong.

Also - I don't see how the placeholder.js would work in IE8 (I've not tested it yet, so I might be eating my words), but it uses HTMLElement.prototype - which isn't available in IE, and it's using addEventListener which isn't available in IE8 and below...

My mistake, I hadn’t tested in IE / looked at the source code either :) Edited my comment now. I guess I was just trying to point out yours doesn’t seem to work in IE.

Very nice indeed. I made a similar script with jQuery and packaged it into a plugin, it has the benefit of also supporting password inputs for IE (all versions), which many of the placeholder implementations seems to lack of.

http://github.com/danielstocks/jQuery-Placeholder

Cheers.