akirk · CamaroSS · Jul 31, 2010 · Aug 10, 2010 · Aug 11, 2010 · Aug 11, 2010
diff --git a/README.rst b/README.rst
@@ -6,15 +6,48 @@ Placeholder plugin for jQuery
 The HTML5 placeholder attribute is awesome, unfortunately only supported by some browsers. This
 plugin replicates the placeholder behavior for unsupported browsers.
 
-- Checks for placeholder support before running
-- Tested in IE (6,7,8).
-- Works with password inputs
+Compatibility:
+^^^^^^^^^^^^^^
+IE 6+
+Firefox 3+
+Safari 3+
+Chrome ✓
+Opera ✓
+iPhone ✓
+Android ✓
+
+*Please note*
+The placeholder attribute should not be used as an alternative to a label.
+http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute
+
+If you must hide labels, do it with JavaScript as you activate the placeholder.
+
 
 Usage
 =====
 
 It's easy!::
 
-    $(':text[placeholder],:password[placeholder]').placeholder();
+    $('input[placeholder], textarea[placeholder]').placeholder();
+
+Enjoy.
+
+Styling
+=======
+
+Native styling of HTML5 placeholders::
+
+    ::-webkit-input-placeholder {color: red;}
+
+    :-moz-placeholder {color: red;}
+
+jQuery-Placeholder toggles a .placeholder class for browser that don't natively support placeholders::
+
+    .placeholder { color: red }
+
+
+Credit
+======
+Copyright 2011, Daniel Stocks ( http://webcloud.se )
 
-Enjoy.
+Thanks to Nikita Vasilyev and James Rosen for feedback and contribution.
diff --git a/demo.html b/demo.html
@@ -1,12 +1,15 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset=utf-8>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <meta charset="utf-8">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
     <script src="jquery.placeholder.js"></script>
     <title>jQuery-Placeholder</title>
     <style>
-    input {padding:4px; width:225px;}
+    body {font-family: arial, sans-serif;}
+        input, textarea {padding:4px; width:225px; font-family: arial, sans-serif; font-size: 12px;}
+        textarea {width: 425px; height: 200px;}
+        .placeholder {color: #aaa;}
     </style>
 </head>
 <body>
@@ -20,9 +23,15 @@ <h2>Demo form</h2>
         <p>
             <input type="password" placeholder="password" name="password">
         </p>
+        <p>
+            <textarea placeholder="A textarea placeholder" name="text"></textarea>
+        </p>
+        <p>
+            <button type="submit">Go</button>
+        </p>
     </form>
 <script>
-    $(':text[placeholder],:password[placeholder]').placeholder();
+    $('input[placeholder], textarea[placeholder]').placeholder();
 </script>
 </body>
 </html>
diff --git a/jquery.placeholder.js b/jquery.placeholder.js
@@ -1,73 +1,108 @@
-/* 
+/*
 * Placeholder plugin for jQuery
-* @author Daniel Stocks (http://webcloud.se)
-* @version 0.1 
+* ---
+* Copyright 2010, Daniel Stocks (http://webcloud.se)
+* Released under the MIT, BSD, and GPL Licenses.
 */
-
 (function($) {
     function Placeholder(input) {
-        // Special treatment for password inputs
+        this.input = input;
         if (input.attr('type') == 'password') {
-            input.attr('realType', 'password');
-            this.isPassword = true;
+            this.handlePassword();
         }
-        this.input = input;
-        // IE doesn't allow changing the type of password inputs
-        this.fakePassword = $("<input>").val(input.attr('placeholder')).focus(function() {
-            input.trigger("focus")
-            $(this).hide();
+        // Prevent placeholder values from submitting
+        $(input[0].form).submit(function() {
+            if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) {
+                input[0].value = '';
+            }
         });
     }
     Placeholder.prototype = {
         show : function(loading) {
-            // FF and IE saves values when you refresh the page. If the user refreshes the page with 
+            // FF and IE saves values when you refresh the page. If the user refreshes the page with
             // the placeholders showing they will be the default values and the input fields won't be empty.
-            if (this.input[0].value == '' || (loading && this.valueIsPlaceholder())) {
+            if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) {
                 if (this.isPassword) {
-                    try { // IE doesn't allow us to change the input type
+                    try {
                         this.input[0].setAttribute('type', 'text');
                     } catch (e) {
                         this.input.before(this.fakePassword.show()).hide();
                     }
                 }
-                this.input[0].value = this.input.attr('placeholder');
                 this.input.addClass('placeholder');
+                this.input[0].value = this.input.attr('placeholder');
             }
         },
         hide : function() {
             if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) {
+                this.input.removeClass('placeholder');
+                this.input[0].value = '';
                 if (this.isPassword) {
                     try {
                         this.input[0].setAttribute('type', 'password');
                     } catch (e) { }
                     // Restore focus for Opera and IE
-                    this.input.show()
+                    this.input.show();
                     this.input[0].focus();
                 }
-                this.input[0].value = '';
-                this.input.removeClass('placeholder');
             }
         },
         valueIsPlaceholder : function() {
             return this.input[0].value == this.input.attr('placeholder');
+        },
+        handlePassword: function() {
+            var input = this.input;
+            input.attr('realType', 'password');
+            this.isPassword = true;
+            // IE < 9 doesn't allow changing the type of password inputs
+            if ($.browser.msie && input[0].outerHTML) {
+                var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1'));
+                this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() {
+                    $(this).hide();
+                    input.show();
+                    input.trigger('focus');
+                    input.removeClass('placeholder');
+                });
+                $(input[0].form).submit(function() {
+                    fakeHTML.remove();
+                    input.show()
+                });
+            }
         }
-    }
-    var supported = !!("placeholder" in document.createElement( "input" ));
-    $.fn.extend({
-        placeholder: function() {
-            return this.each(function() {
-                if(!supported) {
-                    var input = $(this);
-                    var placeholder = new Placeholder(input);
-                    placeholder.show(true);
-                    input.focus(function() {
-                        placeholder.hide();
-                    });
-                    input.blur(function() {
-                        placeholder.show(false);
-                    });
-                }
+    };
+    var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" ));
+    $.fn.placeholder = function() {
+        return NATIVE_SUPPORT ? this : this.each(function() {
+            var input = $(this);
+            var placeholder = new Placeholder(input);
+            placeholder.show(true);
+            input.focus(function() {
+                placeholder.hide();
             });
-        }
-    });
-})(jQuery);
+            input.blur(function() {
+                placeholder.show(false);
+            });
+
+            // On page refresh, IE doesn't re-populate user input
+            // until the window.onload event is fired.
+            if ($.browser.msie) {
+                $(window).load(function() {
+                    if(input.val()) {
+                        input.removeClass("placeholder");
+                    }
+                    placeholder.show(true);
+                });
+                // What's even worse, the text cursor disappears
+                // when tabbing between text inputs, here's a fix
+                input.focus(function() {
+                    if(this.value == "") {
+                        var range = this.createTextRange();
+                        range.collapse(true);
+                        range.moveStart('character', 0);
+                        range.select();
+                    }
+                });
+            }
+        });
+    }
+})(jQuery);
diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js
diff --git a/tests/IE_inputValue.html b/tests/IE_inputValue.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8>
+    <title>IE input value</title>
+</head>
+<body>
+    <form action="">
+        <input id="test" type="text" name="username">
+    </form>
+    <script>
+        var input = document.getElementById("test");
+        alert(input.value);
+        setTimeout(function() {
+
+            alert(input.value);
+        }, 1000);
+    </script>
+</body>
+</html>
diff --git a/tests/IE_textcursor.html b/tests/IE_textcursor.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IE Text Cursor Test - jQuery-Placeholder</title>
+</head>
+<body> 
+    <h1>IE Text Cursor Test</h1>
+    <p><a href="https://github.com/danielstocks/jQuery-Placeholder/issues/closed#issue/8">Related Ticket</a></p>
+    <form action="#">
+        <h2>With Placeholders</h2>
+            <p><input type="text" placeholder="qwe" name="a"></p>
+            <p><input type="text" placeholder="jkl" name="b"></p>
+            <p><input type="text" placeholder="jkl" name="c"></p>
+            <p><input type="text" placeholder="jkl" name="d"></p>
+        <h2>No placeholders</h2>
+            <p><input type="text" name="e"></p>
+            <p><input type="text" name="f"></p>
+            <p><input type="text" name="g"></p>
+            <p><input type="text" name="h"></p>
+        </form>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script src="../jquery.placeholder.js"></script>
+    <script>$("input[placeholder]").placeholder();</script>
+</body>
+</html>
diff --git a/tests/env-JS.html b/tests/env-JS.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset=utf-8>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script src="../jquery.placeholder.js"></script>
+    <title>jQuery-Placeholder</title>
+    <style>
+    body {font-family: arial, sans-serif;}
+    input {padding:4px; width:255px; font-family: arial, sans-serif; font-size: 12px;}
+    .placeholder {color: #aaa;}
+    </style>
+</head>
+<body>
+    <h1>jQuery-Placeholder</h1>
+    <p>Env-JS test. Try setting the values with javascript and then submitting the form.</p>
+    <form action="">
+        <p>
+            <input id="test-field" type="text" placeholder="test field" name="test-field">
+        </p>
+        <p>
+            <button type="submit">Go</button>
+        </p>
+    </form>
+<script>
+    $('input[placeholder]').placeholder();
+    $("#test-field").val("this was set with JavaScript");
+</script>
+</body>
+</html>
diff --git a/tests/password.html b/tests/password.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>IE password field CSS test - jQuery Placeholder</title>
+    <style>
+    #pass {font-size: 2em;}
+    </style>
+</head>
+<body>
+<h1>IE password field CSS test - jQuery Placeholder</h1>
+    <input type="password" id="pass" placeholder="pass">
+    <p>Input field should consistent in all browsers.</p>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script src="../jquery.placeholder.js"></script>
+    <script>
+    $(function(){
+    	$("#pass").placeholder();
+    })
+    </script>
+</body>
+</html>