Fixes

index.html

@@ -5,10 +5,11 @@
 		<title>HTML5 placeholder jQuery Plugin</title>
 		<style>
 			body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; }
-			input, textarea { font-size: 1em; }
+			input, textarea { font-size: 1em; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
+			input { width: 250px; }
+			input[type="radio"], input[type="checkbox"] { width: auto }
 			label code { display: inline-block; width: 200px; }
 			textarea { height: 2em; width: 20em;, font-family: sans-serif; }
-			form div { border-bottom: 1px solid #ccc; padding: 5px; }
 			.my-placeholder { color: #aaa; }
 			.note { border: 1px solid orange; font-size: 13px; padding: 1em; background: #ffffe0; }
 		</style>
@@ -19,16 +20,14 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
 
 		<a href="https://github.com/mathiasbynens/jquery-placeholder"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
 
-		<form>
-			<input type="radio" name="color" placeholder="This can't be seen"> Red
-			<input type="radio" name="color" placeholder="This can't be seen"> Green
-			<input type="radio" name="color" placeholder="This can't be seen"> Blue
+		<form method="GET" action="">
+			<input type="radio" name="color" value="red" placeholder="This can't be seen"> Red
+			<input type="radio" name="color" value="green" placeholder="This can't be seen"> Green
 
 			<br />
 
-			<input type="checkbox" name="fruits" placeholder="This can't be seen"> Apple
-			<input type="checkbox" name="fruits" placeholder="This can't be seen"> Banana
-			<input type="checkbox" name="fruits" placeholder="This can't be seen"> Pear
+			<input type="checkbox" name="fruits" value="apple" placeholder="This can't be seen"> Apple
+			<input type="checkbox" name="fruits" value="banana" placeholder="This can't be seen"> Banana
 
 			<br />
 
@@ -46,12 +45,12 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
 			<br />
 			<br />
 
-			<input type="email" name="email" placeholder="type=email">
+			<input type="email" name="email" placeholder="type=email" value="prefilled@example.com">
 
 			<br />
 			<br />
 
-			<input type="url" name="url" placeholder="type=url">
+			<input type="url" name="url" placeholder="type=url" value="http://prefilled.example.com">
 
 			<br />
 			<br />
@@ -83,11 +82,17 @@ <h1>HTML5 Placeholder jQuery Plugin</h1>
 			<br />
 			<br />
 
-			<label for="p">Click me to focus password field</label>
+			<label for="p">A Label: Click me to focus password field up above</label>
 
 			<br />
 			<br />
 
+			<div class="wrapped">
+				<input type="password" name="password2" placeholder="type=password 2">
+			</div>
+
+			<br />
+
 			<input type="submit" value="type=submit"> 
 			<input type="reset" value="type=reset">
 		</form>

jquery.placeholder.js

@@ -1,5 +1,5 @@
 /*!
- * jQuery Placeholder Plugin v2.1.3
+ * jQuery Placeholder Plugin v2.2.0
  * https://github.com/mathiasbynens/jquery-placeholder
  *
  * Copyright 2011, 2015 Mathias Bynens
@@ -17,10 +17,17 @@
     }
 }(function($) {
 
+    /****
+     * Allows plugin behavior simulation in modern browsers for easier debugging. 
+     * When setting to true, use attribute "placeholder-x" rather than the usual "placeholder" in your inputs/textareas 
+     * i.e. <input type="text" placeholder-x="my placeholder text" />
+     */
+    var debugMode = false; 
+
     // Opera Mini v7 doesn't support placeholder although its DOM seems to indicate so
     var isOperaMini = Object.prototype.toString.call(window.operamini) === '[object OperaMini]';
-    var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini;
-    var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini;
+    var isInputSupported = 'placeholder' in document.createElement('input') && !isOperaMini && !debugMode;
+    var isTextareaSupported = 'placeholder' in document.createElement('textarea') && !isOperaMini && !debugMode;
     var valHooks = $.valHooks;
     var propHooks = $.propHooks;
     var hooks;
@@ -43,8 +50,9 @@
             var defaults = {customClass: 'placeholder'};
             settings = $.extend({}, defaults, options);
 
-            return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]')
+            return this.filter((isInputSupported ? 'textarea' : ':input') + '[' + (debugMode ? 'placeholder-x' : 'placeholder') + ']')
                 .not('.'+settings.customClass)
+                .not(':radio, :checkbox, :hidden')
                 .bind({
                     'focus.placeholder': clearPlaceholder,
                     'blur.placeholder': setPlaceholder
@@ -167,9 +175,9 @@
     function clearPlaceholder(event, value) {
 
         var input = this;
-        var $input = $(input);
+        var $input = $(this);
 
-        if (input.value === $input.attr('placeholder') && $input.hasClass(settings.customClass)) {
+        if (input.value === $input.attr((debugMode ? 'placeholder-x' : 'placeholder')) && $input.hasClass(settings.customClass)) {
 
             input.value = '';
             $input.removeClass(settings.customClass);
@@ -196,22 +204,12 @@
     function setPlaceholder(event) {
         var $replacement;
         var input = this;
-        var $input = $(input);
+        var $input = $(this);
         var id = input.id;
 
         // If the placeholder is activated, triggering blur event (`$input.trigger('blur')`) should do nothing.
-        if (event && event.type === 'blur') {
-
-            if ($input.hasClass(settings.customClass)) {
-                return;
-            }
-
-            if (input.type === 'password') {
-                $replacement = $input.prevAll('input[type="text"]:first');
-                if ($replacement.length > 0 && $replacement.is(':visible')) {
-                    return;
-                }
-            }
+        if (event && event.type === 'blur' && $input.hasClass(settings.customClass)) {
+            return;
         }
 
         if (input.value === '') {
@@ -255,7 +253,7 @@
             }
 
             $input.addClass(settings.customClass);
-            $input[0].value = $input.attr('placeholder');
+            $input[0].value = $input.attr((debugMode ? 'placeholder-x' : 'placeholder'));
 
         } else {
             $input.removeClass(settings.customClass);