Added cross-browser support for type=password, based on sidonath’s fork.

README.md

@@ -14,6 +14,7 @@ This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/),
     <input type="email" name="email" placeholder="e.g. [email protected]">
     <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
     <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
+    <input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
     <input type="search" name="search" placeholder="Search this site…">
     <textarea name="message" placeholder="Your message goes here"></textarea>
 
@@ -30,8 +31,8 @@ The plugin automatically adds `class="placeholder"` to the elements who are curr
 
 ## Notes
 
+* Works in all A-grade browsers, including IE6.
 * The plugin automatically checks if the browser supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything.
-* The plugin will ignore password inputs.
 
 ## Credits
 

jquery.placeholder.js

@@ -1,5 +1,5 @@
 /*!
- * HTML5 Placeholder jQuery Plugin v1.2
+ * HTML5 Placeholder jQuery Plugin v1.3
  * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
  * @author Mathias Bynens <http://mathiasbynens.be/>
  */
@@ -9,17 +9,50 @@
   if (this[0] && 'placeholder' in document.createElement('input')) {
    // Allow chaining
    return this;
-  };
+  }
+  function args($elem) {
+   // Get attributes string from outerHTML
+   var html = $('<div>').append($elem.clone()).html().replace(/<(\w+)\s+(.*)>/, '$2'),
+       attr,
+       attrs = {};
+   while ((attr = html.match(/\s*([\w-]+)=("[^"]*"|'[^']*'|\w+)/))) {
+    // Assign attribute to dictionary, but remove quotes first
+    attrs[attr[1]] = attr[2].replace(/^(["'])(.*?)\1$/, '$2');
+    html = html.replace(attr[0], '');
+   }
+   return attrs;
+  }
+  function onFocus() {
+   var $input = $(this);
+   if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) {
+    if ($input.data('placeholder-password')) {
+     $input.next().show().focus().end().remove();
+    } else {
+     $input.val('').removeClass('placeholder');
+    }
+   }
+  }
   // Made this a function, because we actually need it on two different occasions:
   // 1) Once when the DOM is loaded;
   // 2) Once every time the focusout() is triggered.
   function setPlaceholder($elem) {
+   var $replacement;
    if ($elem.val() === '' || $elem.val() === $elem.attr('placeholder')) {
+    if ($elem.is(':password')) {
+     try {
+      $replacement = $elem.clone().attr({ type: 'text' });
+     } catch(e) {
+      $replacement = $('<input>', $.extend(args($elem), { type: 'text' }));
+     }
+     $replacement.data('placeholder-password', true).focus(onFocus);
+     $elem.hide().before($replacement);
+     $elem = $replacement;
+    }
     $elem.addClass('placeholder').val($elem.attr('placeholder'));
    } else {
     $elem.removeClass('placeholder');
-   };
-  };
+   }
+  }
   // Look for forms with inputs and/or textareas with a placeholder attribute in them
   $('form:has([placeholder])').submit(function() {
    // Clear the placeholder values so they don’t get submitted
@@ -32,16 +65,12 @@
   // Yes, .each() — in case .placeholder() is called on several elements, which is very likely, e.g. $('input').placeholder();
   return this.each(function() {
    var $input = $(this);
-   // Quit if the current element is a password input, or not an input/textarea at all
-   if ($input.is(':password') || !$input.is(':input')) {
+   // Quit if the current element is not an input/textarea at all
+   if (!$input.is(':input')) {
     return;
-   };
+   }
    setPlaceholder($input);
-   $input.focus(function() {
-    if ($input.val() === $input.attr('placeholder')) {
-     $input.val('').removeClass('placeholder');
-    };
-   }).blur(function() {
+   $input.focus(onFocus).blur(function() {
     setPlaceholder($input);
    });
   });