Avoid duplicate IDs for password inputs. Fixes mathiasbynens#9.

demo.html

@@ -17,20 +17,23 @@
   <h1>HTML5 Placeholder jQuery Plugin</h1>
   <p>Check out <a href="http://github.com/mathiasbynens/Placeholder-jQuery-Plugin">the HTML5 Placeholder jQuery Plugin project page on GitHub</a>.</p>
   <pre><code>$(function() {<br> $('input, textarea').placeholder();<br>});</code></pre>
-  <form action="placeholder" method="get">
+  <form>
    <p><label><code>type=search</code> <input type="search" name="search" placeholder="Search this site…"></label></p>
    <p><label><code>type=text</code> <input type="text" name="name" placeholder="e.g. John Doe"></label></p>
    <p><label><code>type=email</code> <input type="email" name="email" placeholder="e.g. [email protected]"></label></p>
    <p><label><code>type=url</code> <input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/"></label></p>
    <p><label><code>type=tel</code> <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88"></label></p>
-   <p><label><code>type=password</code> <input type="password" name="password" placeholder="e.g. h4x0rpr00fz"></label></p>
+   <p><label><code>type=password</code> <input type="password" name="password" placeholder="e.g. hunter2" id="p" class="x"></label></p>
    <p><label><code>textarea</code> <textarea name="message" placeholder="Your message goes here"></textarea></label></p>
    <p><input type="submit" value="type=submit"></p>
   </form>
   <p>— <a href="http://mathiasbynens.be/" title="Mathias Bynens, front-end developer">Mathias</a></p>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script src="jquery.placeholder.js"></script>
   <script>
+   // To test the @id toggling on password inputs in browsers that don’t support changing an input’s @type dynamically (e.g. Firefox 3.6 or IE), uncomment this:
+   // jQuery.fn.hide = function() { return this; }
+   // Then add an @id to the password input and apply some styles to it.
    $(function() {
     // Invoke the plugin
     $('input, textarea').placeholder();

jquery.placeholder.js

@@ -1,5 +1,5 @@
 /*!
- * HTML5 Placeholder jQuery Plugin v1.8.1
+ * HTML5 Placeholder jQuery Plugin v1.8.2
  * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin
  * @author Mathias Bynens <http://mathiasbynens.be/>
  */
@@ -39,7 +39,7 @@
 		var $input = $(this);
 		if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) {
 			if ($input.data('placeholder-password')) {
-				$input.hide().next().show().focus();
+				$input.hide().next().attr('id', $input.removeAttr('id').data('placeholder-id')).show().focus();
 			} else {
 				$input.val('').removeClass('placeholder');
 			}
@@ -50,32 +50,32 @@
 		var $replacement,
 		    $input = $(this),
 		    $origInput = $input,
-		    isInitialized = $input.data('placeholder-init');
-		if ($input.val() === '' || (!isInitialized && $input.val() === $input.attr('placeholder'))) {
+		    id = this.id;
+		if ($input.val() === '') {
 			if ($input.is(':password')) {
 				if (!$input.data('placeholder-textinput')) {
 					try {
 						$replacement = $input.clone().attr({ type: 'text' });
 					} catch(e) {
-						$replacement = $('<input>').attr($.extend(args($input[0]), { type: 'text' }));
+						$replacement = $('<input>').attr($.extend(args(this), { type: 'text' }));
 					}
 					$replacement
 						.removeAttr('name')
+						// We could just use the `.data(obj)` syntax here, but that wouldn’t work in pre-1.4.3 jQueries
 						.data('placeholder-password', true)
+						.data('placeholder-id', id)
 						.bind('focus.placeholder', clearPlaceholder);
 					$input
 						.data('placeholder-textinput', $replacement)
+						.data('placeholder-id', id)
 						.before($replacement);
 				}
-				$input = $input.hide().prev().show();
+				$input = $input.removeAttr('id').hide().prev().attr('id', id).show();
 			}
 			$input.addClass('placeholder').val($input.attr('placeholder'));
 		} else {
 			$input.removeClass('placeholder');
 		}
-		if (!isInitialized) {
- 		$origInput.data('placeholder-init', true);
- 	}
 	}
 
 	$(function() {