From e24622b4329a7ab003069fd18f816370c235bafc Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Sat, 31 Jul 2010 13:11:02 +0200 Subject: [PATCH 01/39] Added test for textarea --- demo.html | 10 ++++++++-- jquery.placeholder.js | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/demo.html b/demo.html index 6212f77..a3771a6 100644 --- a/demo.html +++ b/demo.html @@ -6,7 +6,10 @@ jQuery-Placeholder @@ -20,9 +23,12 @@

Demo form

+

+ +

\ No newline at end of file diff --git a/jquery.placeholder.js b/jquery.placeholder.js index a2c99d3..5e7ba45 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,7 +1,7 @@ /* * Placeholder plugin for jQuery * @author Daniel Stocks (http://webcloud.se) -* @version 0.1 +* @version 0.1 */ (function($) { @@ -13,7 +13,7 @@ } this.input = input; // IE doesn't allow changing the type of password inputs - this.fakePassword = $("").val(input.attr('placeholder')).focus(function() { + this.fakePassword = $('').val(input.attr('placeholder')).focus(function() { input.trigger("focus") $(this).hide(); }); From dc8385cc3922af293dd013be55beb6ffaa48a8e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Gamez?= Date: Tue, 10 Aug 2010 19:38:01 +0800 Subject: [PATCH 02/39] Added some semicolons for JSLint validation --- jquery.placeholder.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 5e7ba45..df1b3b1 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -14,7 +14,7 @@ this.input = input; // IE doesn't allow changing the type of password inputs this.fakePassword = $('').val(input.attr('placeholder')).focus(function() { - input.trigger("focus") + input.trigger("focus"); $(this).hide(); }); } @@ -41,7 +41,7 @@ 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 = ''; @@ -51,7 +51,8 @@ valueIsPlaceholder : function() { return this.input[0].value == this.input.attr('placeholder'); } - } + }; + var supported = !!("placeholder" in document.createElement( "input" )); $.fn.extend({ placeholder: function() { From 2e8a4e2063177d007f5d891b3299eb9bf006e6c4 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Wed, 11 Aug 2010 09:16:14 +0200 Subject: [PATCH 03/39] whitespace clean, version bump --- jquery.placeholder.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index df1b3b1..ce55d98 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,9 +1,8 @@ /* * Placeholder plugin for jQuery * @author Daniel Stocks (http://webcloud.se) -* @version 0.1 +* @version 0.2 */ - (function($) { function Placeholder(input) { // Special treatment for password inputs @@ -52,7 +51,6 @@ return this.input[0].value == this.input.attr('placeholder'); } }; - var supported = !!("placeholder" in document.createElement( "input" )); $.fn.extend({ placeholder: function() { From e8dc3b9e36fe0825d59c81a004c1a491460a81de Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Wed, 11 Aug 2010 10:18:51 +0200 Subject: [PATCH 04/39] stricter type checking --- jquery.placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index ce55d98..24ce961 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -21,7 +21,7 @@ show : function(loading) { // 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 this.input[0].setAttribute('type', 'text'); From 91ca997ec4bbd6b540b214cb2cda6d6442a010b0 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 3 Sep 2010 10:56:29 +0200 Subject: [PATCH 05/39] changed jQuery selector to be mor IE friendly --- README.rst | 2 +- demo.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.rst b/README.rst index 5e656dc..9d168e3 100644 --- a/README.rst +++ b/README.rst @@ -15,6 +15,6 @@ Usage It's easy!:: - $(':text[placeholder],:password[placeholder]').placeholder(); + $('input[placeholder], textarea[placeholder]').placeholder(); Enjoy. \ No newline at end of file diff --git a/demo.html b/demo.html index a3771a6..8df4223 100644 --- a/demo.html +++ b/demo.html @@ -28,7 +28,7 @@

Demo form

\ No newline at end of file From 84e16d7f4c1b629e41d63a8de804e68ab58cd38b Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 14:54:02 +0200 Subject: [PATCH 06/39] shorter code --- jquery.placeholder.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 24ce961..c389dd5 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -52,21 +52,19 @@ } }; 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); - }); - } - }); - } - }); + $.fn.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); + }); + } + }); + } })(jQuery); \ No newline at end of file From 135791754b43f9766491bef0e45b0c32b7bfa37f Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 15:22:50 +0200 Subject: [PATCH 07/39] removed redundant support chechk --- README.rst | 2 +- demo.html | 5 ++++- jquery.placeholder.js | 30 +++++++++++++++++------------- 3 files changed, 22 insertions(+), 15 deletions(-) diff --git a/README.rst b/README.rst index 9d168e3..b8e9d67 100644 --- a/README.rst +++ b/README.rst @@ -7,7 +7,7 @@ The HTML5 placeholder attribute is awesome, unfortunately only supported by some plugin replicates the placeholder behavior for unsupported browsers. - Checks for placeholder support before running -- Tested in IE (6,7,8). +- Tested in IE (6,7,8,9). - Works with password inputs Usage diff --git a/demo.html b/demo.html index 8df4223..0bec0e9 100644 --- a/demo.html +++ b/demo.html @@ -26,9 +26,12 @@

Demo form

+

+ +

\ No newline at end of file diff --git a/jquery.placeholder.js b/jquery.placeholder.js index c389dd5..3f123e1 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -10,12 +10,18 @@ input.attr('realType', 'password'); this.isPassword = true; } - this.input = input; + // Prevent placeholder values from submitting + $(input[0].form).submit(function() { + if (input.hasClass('placeholder')) { + input[0].value = ''; + } + }); // IE doesn't allow changing the type of password inputs this.fakePassword = $('').val(input.attr('placeholder')).focus(function() { input.trigger("focus"); $(this).hide(); }); + this.input = input; } Placeholder.prototype = { show : function(loading) { @@ -53,18 +59,16 @@ }; var supported = !!("placeholder" in document.createElement( "input" )); $.fn.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); - }); - } + return supported ? this : this.each(function() { + var input = $(this); + var placeholder = new Placeholder(input); + placeholder.show(true); + input.focus(function() { + placeholder.hide(); + }); + input.blur(function() { + placeholder.show(false); + }); }); } })(jQuery); \ No newline at end of file From cfb04d613628a387ebd1d731c14952d4379c2b25 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 15:24:17 +0200 Subject: [PATCH 08/39] removed console log from demo --- demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo.html b/demo.html index 0bec0e9..52056d4 100644 --- a/demo.html +++ b/demo.html @@ -31,7 +31,7 @@

Demo form

\ No newline at end of file From dfb87058700af9aa8db8c639f00b7921ac03186f Mon Sep 17 00:00:00 2001 From: Nikita Vasilyev Date: Thu, 16 Sep 2010 21:37:50 +0800 Subject: [PATCH 09/39] Bug in IE 6-9 --- tests/password.html | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 tests/password.html diff --git a/tests/password.html b/tests/password.html new file mode 100644 index 0000000..a84d1d6 --- /dev/null +++ b/tests/password.html @@ -0,0 +1,15 @@ + + + +

Input field should NOT change size. Fails in IE.

+ + + + + From 6d6a3b09e029e528ee123701da1b372c24a914f0 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 17:35:06 +0200 Subject: [PATCH 10/39] attempt to IE fix --- jquery.placeholder.js | 27 ++++++++++++++++++++------- tests/password.html | 2 +- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 3f123e1..04ebd0b 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,10 +1,10 @@ /* * Placeholder plugin for jQuery * @author Daniel Stocks (http://webcloud.se) -* @version 0.2 */ (function($) { function Placeholder(input) { + // Special treatment for password inputs if (input.attr('type') == 'password') { input.attr('realType', 'password'); @@ -16,11 +16,24 @@ input[0].value = ''; } }); - // IE doesn't allow changing the type of password inputs - this.fakePassword = $('').val(input.attr('placeholder')).focus(function() { + this.id = input[0].id; + + // IE < 9 doesn't allow changing the type of password inputs + // so we need to some extra stuff here + var fake = this.fakePassword = $('').focus(function() { input.trigger("focus"); - $(this).hide(); + $(this).removeAttr('id').hide(); + }).val(input.attr("placeholder")); + // Copy all the attributes from original input (but only the ones that are specified (IE < 8)) + var attributes = $.map(input[0].attributes, function(item) { + if(item.specified) return item.name; }); + // Apply attributes to our fake password field + $.each(attributes, function(i, attr) { + if(input[0][attr] == "password") return; + fake.attr( attr, input[0][attr] ); + }); + this.input = input; } Placeholder.prototype = { @@ -29,10 +42,10 @@ // 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.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.attr('id','').before(this.fakePassword.show().attr('id', this.id)).hide() } } this.input[0].value = this.input.attr('placeholder'); @@ -46,7 +59,7 @@ this.input[0].setAttribute('type', 'password'); } catch (e) { } // Restore focus for Opera and IE - this.input.show(); + this.input.show().attr('id', this.id); this.input[0].focus(); } this.input[0].value = ''; diff --git a/tests/password.html b/tests/password.html index a84d1d6..29c155a 100644 --- a/tests/password.html +++ b/tests/password.html @@ -1,5 +1,5 @@ From 0be41ed766536607712a650b8f9b5cc1146b1524 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 17:52:35 +0200 Subject: [PATCH 11/39] bah --- jquery.placeholder.js | 57 ++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 22 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 04ebd0b..a1d25f7 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -5,36 +5,17 @@ (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(); } + // Prevent placeholder values from submitting $(input[0].form).submit(function() { if (input.hasClass('placeholder')) { input[0].value = ''; } }); - this.id = input[0].id; - - // IE < 9 doesn't allow changing the type of password inputs - // so we need to some extra stuff here - var fake = this.fakePassword = $('').focus(function() { - input.trigger("focus"); - $(this).removeAttr('id').hide(); - }).val(input.attr("placeholder")); - // Copy all the attributes from original input (but only the ones that are specified (IE < 8)) - var attributes = $.map(input[0].attributes, function(item) { - if(item.specified) return item.name; - }); - // Apply attributes to our fake password field - $.each(attributes, function(i, attr) { - if(input[0][attr] == "password") return; - fake.attr( attr, input[0][attr] ); - }); - - this.input = input; } Placeholder.prototype = { show : function(loading) { @@ -68,6 +49,38 @@ }, valueIsPlaceholder : function() { return this.input[0].value == this.input.attr('placeholder'); + }, + handlePassword: function() { + + input = this.input; + + // Special treatment for password inputs + if (input.attr('type') == 'password') { + input.attr('realType', 'password'); + this.isPassword = true; + } + + if ($.browser.msie && input[0].outerHTML) { + + console.log(this.isPassword); + + this.id = input[0].id; + // IE < 9 doesn't allow changing the type of password inputs + // so we need to some extra stuff here + var fake = this.fakePassword = $('').focus(function() { + input.trigger("focus"); + $(this).removeAttr('id').hide(); + }).val(input.attr("placeholder")); + // Copy all the attributes from original input (but only the ones that are specified (IE < 8)) + var attributes = $.map(input[0].attributes, function(item) { + if(item.specified) return item.name; + }); + // Apply attributes to our fake password field + $.each(attributes, function(i, attr) { + if(input[0][attr] == "password") return; + fake.attr( attr, input[0][attr] ); + }); + } } }; var supported = !!("placeholder" in document.createElement( "input" )); From ce339c3433e1f2662143131a7acc993f8be73c1b Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 18:30:34 +0200 Subject: [PATCH 12/39] applied patch from Nikita Vasilyev --- jquery.placeholder.js | 53 ++++++++++++++----------------------------- 1 file changed, 17 insertions(+), 36 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index a1d25f7..ad7d7ac 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -4,29 +4,28 @@ */ (function($) { function Placeholder(input) { - this.input = input; if (input.attr('type') == 'password') { this.handlePassword(); } - // Prevent placeholder values from submitting - $(input[0].form).submit(function() { - if (input.hasClass('placeholder')) { - input[0].value = ''; - } - }); + //$(input[0].form).submit(function() { + // if (input.hasClass('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 // 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.isPassword) { try { this.input[0].setAttribute('type', 'text'); } catch (e) { - this.input.attr('id','').before(this.fakePassword.show().attr('id', this.id)).hide() + this.input.before(this.fakePassword.show()).hide(); } } this.input[0].value = this.input.attr('placeholder'); @@ -40,7 +39,7 @@ this.input[0].setAttribute('type', 'password'); } catch (e) { } // Restore focus for Opera and IE - this.input.show().attr('id', this.id); + this.input.show(); this.input[0].focus(); } this.input[0].value = ''; @@ -51,34 +50,16 @@ return this.input[0].value == this.input.attr('placeholder'); }, handlePassword: function() { - - input = this.input; - - // Special treatment for password inputs - if (input.attr('type') == 'password') { - input.attr('realType', 'password'); - this.isPassword = true; - } - + + 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) { - - console.log(this.isPassword); - - this.id = input[0].id; - // IE < 9 doesn't allow changing the type of password inputs - // so we need to some extra stuff here - var fake = this.fakePassword = $('').focus(function() { - input.trigger("focus"); - $(this).removeAttr('id').hide(); - }).val(input.attr("placeholder")); - // Copy all the attributes from original input (but only the ones that are specified (IE < 8)) - var attributes = $.map(input[0].attributes, function(item) { - if(item.specified) return item.name; - }); - // Apply attributes to our fake password field - $.each(attributes, function(i, attr) { - if(input[0][attr] == "password") return; - fake.attr( attr, input[0][attr] ); + var fakeHTML = input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1'); + this.fakePassword = $(fakeHTML).val(input.attr('placeholder')).addClass('placeholder').focus(function() { + input.trigger('focus'); + $(this).hide(); }); } } From 7f3ae3f7932dd9a0e5c5f285de1875e52d5c2ed0 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 19:23:57 +0200 Subject: [PATCH 13/39] prevent submission of placeholders --- jquery.placeholder.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index ad7d7ac..912c81e 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -9,11 +9,11 @@ this.handlePassword(); } // Prevent placeholder values from submitting - //$(input[0].form).submit(function() { - // if (input.hasClass('placeholder')) { - // input[0].value = ''; - // } - //}); + $(input[0].form).submit(function() { + if (input.hasClass('placeholder')) { + input[0].value = ''; + } + }); } Placeholder.prototype = { show : function(loading) { @@ -67,6 +67,7 @@ var supported = !!("placeholder" in document.createElement( "input" )); $.fn.placeholder = function() { return supported ? this : this.each(function() { + console.log($(this).val()); var input = $(this); var placeholder = new Placeholder(input); placeholder.show(true); From cf47913171ad8d78b30e5c1aa52e30a51b471732 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 16 Sep 2010 19:24:30 +0200 Subject: [PATCH 14/39] oops consiole log --- jquery.placeholder.js | 1 - 1 file changed, 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 912c81e..3d68608 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -67,7 +67,6 @@ var supported = !!("placeholder" in document.createElement( "input" )); $.fn.placeholder = function() { return supported ? this : this.each(function() { - console.log($(this).val()); var input = $(this); var placeholder = new Placeholder(input); placeholder.show(true); From baa31df4e82860224ab7f2bbac0efdbccb31f547 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 17 Sep 2010 10:57:13 +0200 Subject: [PATCH 15/39] temporary IE onload issue --- jquery.placeholder.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 3d68608..b5cc4cd 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -66,8 +66,8 @@ }; var supported = !!("placeholder" in document.createElement( "input" )); $.fn.placeholder = function() { - return supported ? this : this.each(function() { - var input = $(this); + return supported ? this : this.each(function() { + var input = $(this); var placeholder = new Placeholder(input); placeholder.show(true); input.focus(function() { @@ -76,6 +76,17 @@ 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); + }); + } }); } })(jQuery); \ No newline at end of file From 446605ae64b044eb8b39f7fad227db213a5d2d4a Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 17 Sep 2010 10:57:53 +0200 Subject: [PATCH 16/39] temporary IE onload issue --- jquery.placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index b5cc4cd..954781b 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -80,7 +80,7 @@ // On page refresh, IE doesn't re-populate user input // until the window.onload event is fired. if ($.browser.msie) { - $(window).load(function() { + $(window).load(function() { if(input.val()) { input.removeClass("placeholder"); } From ba2ad9af8ad3a91f08e980fb457c6be63d075144 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Oct 2010 15:14:01 +0200 Subject: [PATCH 17/39] Fixed a bug where textcursor disappears in IE --- jquery.placeholder.js | 16 ++++++++++++---- tests/IE_inputValue.html | 20 ++++++++++++++++++++ tests/IE_textcursor.html | 28 ++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 tests/IE_inputValue.html create mode 100644 tests/IE_textcursor.html diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 954781b..5c94efe 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -19,7 +19,6 @@ show : function(loading) { // 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.isPassword) { try { @@ -34,6 +33,10 @@ }, 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'); @@ -42,8 +45,6 @@ this.input.show(); this.input[0].focus(); } - this.input[0].value = ''; - this.input.removeClass('placeholder'); } }, valueIsPlaceholder : function() { @@ -76,7 +77,6 @@ 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) { @@ -85,6 +85,14 @@ 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() { + var range = this.createTextRange(); + range.collapse(true); + range.moveStart('character', 1); + range.select(); + }); }); } }); diff --git a/tests/IE_inputValue.html b/tests/IE_inputValue.html new file mode 100644 index 0000000..d36e4bb --- /dev/null +++ b/tests/IE_inputValue.html @@ -0,0 +1,20 @@ + + + + + IE input value + + +
+ +
+ + + \ No newline at end of file diff --git a/tests/IE_textcursor.html b/tests/IE_textcursor.html new file mode 100644 index 0000000..eae3dd5 --- /dev/null +++ b/tests/IE_textcursor.html @@ -0,0 +1,28 @@ + + + + + IE cursor + + +
+

With Placeholders

+

+

+

+

+

No placeholders

+

+

+

+

+
+ + + + + \ No newline at end of file From 7ba2dc5d2c90819d86cc57f487824ac007294254 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Oct 2010 15:26:33 +0200 Subject: [PATCH 18/39] Only apply fix for IE if input is empty --- jquery.placeholder.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 5c94efe..792f25a 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -17,7 +17,7 @@ } 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.isPassword) { @@ -88,10 +88,12 @@ // What's even worse, the text cursor disappears // when tabbing between text inputs, here's a fix input.focus(function() { - var range = this.createTextRange(); - range.collapse(true); - range.moveStart('character', 1); - range.select(); + if(this.value == "") { + var range = this.createTextRange(); + range.collapse(true); + range.moveStart('character', 0); + range.select(); + } }); }); } From d806fbdf68a3580cc8deb88df72d5dbb3051a6a3 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Oct 2010 15:37:31 +0200 Subject: [PATCH 19/39] Move out from load event --- jquery.placeholder.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 792f25a..7af99a6 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -85,16 +85,16 @@ 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(); - } - }); + }); + // 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(); + } }); } }); From 11db90d5ba74775af7dee0cae073b5b9a9902ec4 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Oct 2010 15:39:03 +0200 Subject: [PATCH 20/39] Formatting --- jquery.placeholder.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 7af99a6..612ab36 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -33,10 +33,8 @@ }, 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'); @@ -51,7 +49,6 @@ return this.input[0].value == this.input.attr('placeholder'); }, handlePassword: function() { - var input = this.input; input.attr('realType', 'password'); this.isPassword = true; From 0215f4d47666abf3859e01308bee4e9e29b63222 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 8 Oct 2010 09:43:40 +0200 Subject: [PATCH 21/39] Addeda a license --- README.rst | 7 ++++++- jquery.placeholder.js | 4 +++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/README.rst b/README.rst index b8e9d67..d307414 100644 --- a/README.rst +++ b/README.rst @@ -17,4 +17,9 @@ It's easy!:: $('input[placeholder], textarea[placeholder]').placeholder(); -Enjoy. \ No newline at end of file +Enjoy. + +Credit +====== +Copyright 2010, Daniel Stocks (http://webcloud.se) +Thanks to Nikita Vasilyev (http://elv1s.ru/) for feedback and contribution to the code. \ No newline at end of file diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 612ab36..b4fb027 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,6 +1,8 @@ /* * Placeholder plugin for jQuery -* @author Daniel Stocks (http://webcloud.se) +* --- +* Copyright 2010, Daniel Stocks (http://webcloud.se) +* Released under the MIT, BSD, and GPL Licenses. */ (function($) { function Placeholder(input) { From f345c1a0254ad1f9b6a9e0b03819c9a3b7582cce Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 8 Oct 2010 09:44:31 +0200 Subject: [PATCH 22/39] updated readme --- README.rst | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.rst b/README.rst index d307414..d936c39 100644 --- a/README.rst +++ b/README.rst @@ -21,5 +21,6 @@ Enjoy. Credit ====== -Copyright 2010, Daniel Stocks (http://webcloud.se) -Thanks to Nikita Vasilyev (http://elv1s.ru/) for feedback and contribution to the code. \ No newline at end of file +Copyright 2010, Daniel Stocks ( http://webcloud.se ) + +Thanks to Nikita Vasilyev ( http://elv1s.ru/ ) for feedback and contribution. \ No newline at end of file From e0aaf92b3b89590dc0f2a8ebf81150db6189fef8 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Wed, 13 Oct 2010 11:20:13 +0200 Subject: [PATCH 23/39] updated compatibility list --- README.rst | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/README.rst b/README.rst index d936c39..94fe72b 100644 --- a/README.rst +++ b/README.rst @@ -6,9 +6,20 @@ 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,9). -- 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 (it's better to hide the label with JavaScript if you must). +http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute + Usage ===== From cd7bff985f87b20c3036923e342a957e6e7f6545 Mon Sep 17 00:00:00 2001 From: Magnus Bergmark Date: Fri, 8 Oct 2010 19:08:29 +0800 Subject: [PATCH 24/39] Fixed trailing whitespace --- jquery.placeholder.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index b4fb027..b904514 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,4 +1,4 @@ -/* +/* * Placeholder plugin for jQuery * --- * Copyright 2010, Daniel Stocks (http://webcloud.se) @@ -66,8 +66,8 @@ }; var supported = !!("placeholder" in document.createElement( "input" )); $.fn.placeholder = function() { - return supported ? this : this.each(function() { - var input = $(this); + return supported ? this : this.each(function() { + var input = $(this); var placeholder = new Placeholder(input); placeholder.show(true); input.focus(function() { @@ -98,4 +98,4 @@ } }); } -})(jQuery); \ No newline at end of file +})(jQuery); From a425012674df9459f2a135949a499762aecca0d3 Mon Sep 17 00:00:00 2001 From: Magnus Bergmark Date: Fri, 8 Oct 2010 19:10:21 +0800 Subject: [PATCH 25/39] Added compatability to Env-JS Env-JS does not send any focus and blur events when filling in values, which cases all placeholder fields to keep the .placeholder class until submitting. --- jquery.placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index b904514..c6fbdfb 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -12,7 +12,7 @@ } // Prevent placeholder values from submitting $(input[0].form).submit(function() { - if (input.hasClass('placeholder')) { + if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) { input[0].value = ''; } }); From 9073ad40debb7d81d9e8a8ea3c8e20794730a792 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 15 Oct 2010 11:26:53 +0200 Subject: [PATCH 26/39] test --- README.rst | 6 +++++- tests/env-JS.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 tests/env-JS.html diff --git a/README.rst b/README.rst index 94fe72b..82be9bf 100644 --- a/README.rst +++ b/README.rst @@ -34,4 +34,8 @@ Credit ====== Copyright 2010, Daniel Stocks ( http://webcloud.se ) -Thanks to Nikita Vasilyev ( http://elv1s.ru/ ) for feedback and contribution. \ No newline at end of file +Thanks to Nikita Vasilyev ( http://elv1s.ru/ ) for feedback and contribution. + +TODO +==== +- Clean up and make proper test cases. \ No newline at end of file diff --git a/tests/env-JS.html b/tests/env-JS.html new file mode 100644 index 0000000..5a944ac --- /dev/null +++ b/tests/env-JS.html @@ -0,0 +1,30 @@ + + + + + + + jQuery-Placeholder + + + +

jQuery-Placeholder

+

env-JS test. Try setting the values with javascript and then submitting the form.

+
+

+ +

+

+ +

+
+ + + \ No newline at end of file From 9321a1befe61ac82635416015702d119c69c4465 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Fri, 15 Oct 2010 11:31:49 +0200 Subject: [PATCH 27/39] constant name change --- jquery.placeholder.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index c6fbdfb..d8f9370 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -64,9 +64,9 @@ } } }; - var supported = !!("placeholder" in document.createElement( "input" )); + var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" )); $.fn.placeholder = function() { - return supported ? this : this.each(function() { + return NATIVE_SUPPORT ? this : this.each(function() { var input = $(this); var placeholder = new Placeholder(input); placeholder.show(true); From a23732519deede6cafc06d7a608d240dd2dbeac3 Mon Sep 17 00:00:00 2001 From: PavelT Date: Thu, 28 Oct 2010 09:32:52 +0300 Subject: [PATCH 28/39] Fixed style highlighting issue. --- jquery.placeholder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index d8f9370..a1054f1 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -29,8 +29,8 @@ 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() { From af497142d920f38d15152258433aa02b41385a25 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 11 Nov 2010 15:50:13 +0100 Subject: [PATCH 29/39] cleaned up some tests --- tests/IE_textcursor.html | 36 +++++++++++++++++------------------- tests/env-JS.html | 2 +- tests/password.html | 37 ++++++++++++++++++++++--------------- 3 files changed, 40 insertions(+), 35 deletions(-) diff --git a/tests/IE_textcursor.html b/tests/IE_textcursor.html index eae3dd5..44a5831 100644 --- a/tests/IE_textcursor.html +++ b/tests/IE_textcursor.html @@ -1,28 +1,26 @@ - - IE cursor + + IE Text Cursor Test - jQuery-Placeholder - -
+ +

IE Text Cursor Test

+

Related Ticket

+

With Placeholders

-

-

-

-

+

+

+

+

No placeholders

-

-

-

-

+

+

+

+

+ + + - - - \ No newline at end of file diff --git a/tests/env-JS.html b/tests/env-JS.html index 5a944ac..6d04ba6 100644 --- a/tests/env-JS.html +++ b/tests/env-JS.html @@ -13,7 +13,7 @@

jQuery-Placeholder

-

env-JS test. Try setting the values with javascript and then submitting the form.

+

Env-JS test. Try setting the values with javascript and then submitting the form.

diff --git a/tests/password.html b/tests/password.html index 29c155a..c57688d 100644 --- a/tests/password.html +++ b/tests/password.html @@ -1,15 +1,22 @@ - - - -

Input field should NOT change size. Fails in IE.

- - - - - + + + + + IE password field CSS test - jQuery Placeholder + + + +

IE password field CSS test - jQuery Placeholder

+ +

Input field should consistent in all browsers.

+ + + + + \ No newline at end of file From 8b285bafc2115f72870c4f7ad9327cfce1775ded Mon Sep 17 00:00:00 2001 From: "James A. Rosen" Date: Fri, 21 Jan 2011 14:11:11 -0800 Subject: [PATCH 30/39] redefined input.val() to account for placeholder --- jquery.placeholder.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index a1054f1..5b8358c 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -76,6 +76,17 @@ input.blur(function() { placeholder.show(false); }); + + // Rewrite the val function to take the placeholder into account + var originalVal = input.val + input.val = function() { + if (arguments.length === 0 && this.hasClass('placeholder')) { + return ''; + } else { + return originalVal.apply(this, arguments); + } + }; + // On page refresh, IE doesn't re-populate user input // until the window.onload event is fired. if ($.browser.msie) { From 8064162f2158e68f2845f3cd7090eda9593a569e Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 27 Jan 2011 10:47:42 +0100 Subject: [PATCH 31/39] removed previous patch that wasn't working properly --- jquery.placeholder.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 5b8358c..5caf275 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -77,16 +77,6 @@ placeholder.show(false); }); - // Rewrite the val function to take the placeholder into account - var originalVal = input.val - input.val = function() { - if (arguments.length === 0 && this.hasClass('placeholder')) { - return ''; - } else { - return originalVal.apply(this, arguments); - } - }; - // On page refresh, IE doesn't re-populate user input // until the window.onload event is fired. if ($.browser.msie) { From e36ae169f523b4b0f9242461c5118d32d1d37751 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 27 Jan 2011 10:53:04 +0100 Subject: [PATCH 32/39] slight update to readme --- README.rst | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.rst b/README.rst index 82be9bf..69f8f88 100644 --- a/README.rst +++ b/README.rst @@ -17,9 +17,11 @@ iPhone ✓ Android ✓ *Please note* -The placeholder attribute should not be used as an alternative to a label (it's better to hide the label with JavaScript if you must). +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 ===== @@ -34,7 +36,7 @@ Credit ====== Copyright 2010, Daniel Stocks ( http://webcloud.se ) -Thanks to Nikita Vasilyev ( http://elv1s.ru/ ) for feedback and contribution. +Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. TODO ==== From c35c7f99bcf0352bfc3a577ba5d548bc6b6d71cc Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 27 Jan 2011 10:54:05 +0100 Subject: [PATCH 33/39] slight update to readme --- README.rst | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/README.rst b/README.rst index 69f8f88..81b1295 100644 --- a/README.rst +++ b/README.rst @@ -34,10 +34,6 @@ Enjoy. Credit ====== -Copyright 2010, Daniel Stocks ( http://webcloud.se ) +Copyright 2011, Daniel Stocks ( http://webcloud.se ) -Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. - -TODO -==== -- Clean up and make proper test cases. \ No newline at end of file +Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. \ No newline at end of file From 1f9248a9b79043ed21760a9129acdfbe33579f03 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Tue, 1 Mar 2011 13:44:47 +0100 Subject: [PATCH 34/39] Closes #18 --- jquery.placeholder.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 5caf275..cb4a2f4 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -56,11 +56,15 @@ 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() { + var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1')); + this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() { input.trigger('focus'); $(this).hide(); }); + $(input[0].form).submit(function() { + fakeHTML.remove(); + input.show() + }); } } }; From c0063b21b5e581f6c188b099494b39a5e73f35ce Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Tue, 1 Mar 2011 13:45:32 +0100 Subject: [PATCH 35/39] Minor stuff and tested with jQuery 1.5 --- demo.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/demo.html b/demo.html index 52056d4..f7fc02e 100644 --- a/demo.html +++ b/demo.html @@ -1,15 +1,15 @@ - - + + jQuery-Placeholder @@ -24,7 +24,7 @@

Demo form

- +

From fc040d58a07ec0e492ac16e07a749f393617b7fb Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Apr 2011 16:31:11 +0200 Subject: [PATCH 36/39] styling docs --- README.rst | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.rst b/README.rst index 81b1295..644505f 100644 --- a/README.rst +++ b/README.rst @@ -32,8 +32,22 @@ It's easy!:: 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 ) -Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. \ No newline at end of file +Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. From 47c4a3c89eed697d843a004034f7a33d555a1353 Mon Sep 17 00:00:00 2001 From: Daniel Stocks Date: Thu, 7 Apr 2011 16:33:02 +0200 Subject: [PATCH 37/39] added a minified version for all ze lazy devs. closes #19 --- jquery.placeholder.min.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 jquery.placeholder.min.js diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js new file mode 100644 index 0000000..f04903a --- /dev/null +++ b/jquery.placeholder.min.js @@ -0,0 +1,11 @@ +/* +* Placeholder plugin for jQuery +* --- +* Copyright 2010, Daniel Stocks (http://webcloud.se) +* Released under the MIT, BSD, and GPL Licenses. +*/ + +(function(b){function d(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}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="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder")},handlePassword:function(){var a=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){var c=b(a[0].outerHTML.replace(/type=(['"])?password\1/gi, +"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};var e=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(){return e?this:this.each(function(){var a=b(this),c=new d(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}), +a.focus(function(){if(this.value==""){var a=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery); From 400d7bb8cdd0eea367255581b2f420be26daa23f Mon Sep 17 00:00:00 2001 From: CamaroSS Date: Tue, 11 Sep 2012 13:21:33 +0300 Subject: [PATCH 38/39] Update jquery.placeholder.js Fix for IE: password field disappeared when using autocomplete and trying to switch to the password input from the adjacent "login" text input. --- jquery.placeholder.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index cb4a2f4..c7e66ee 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -58,8 +58,10 @@ 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() { - input.trigger('focus'); $(this).hide(); + input.show(); + input.trigger('focus'); + input.removeClass('placeholder'); }); $(input[0].form).submit(function() { fakeHTML.remove(); From 79a40c692c236f0ed82b750e5ec2cb8b5d3fc522 Mon Sep 17 00:00:00 2001 From: CamaroSS Date: Thu, 13 Sep 2012 11:53:53 +0300 Subject: [PATCH 39/39] Created minified version using YUI Compressor --- jquery.placeholder.min.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js index f04903a..389b16a 100644 --- a/jquery.placeholder.min.js +++ b/jquery.placeholder.min.js @@ -5,7 +5,4 @@ * Released under the MIT, BSD, and GPL Licenses. */ -(function(b){function d(a){this.input=a;a.attr("type")=="password"&&this.handlePassword();b(a[0].form).submit(function(){if(a.hasClass("placeholder")&&a[0].value==a.attr("placeholder"))a[0].value=""})}d.prototype={show:function(a){if(this.input[0].value===""||a&&this.valueIsPlaceholder()){if(this.isPassword)try{this.input[0].setAttribute("type","text")}catch(b){this.input.before(this.fakePassword.show()).hide()}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="",this.isPassword)){try{this.input[0].setAttribute("type","password")}catch(a){}this.input.show();this.input[0].focus()}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder")},handlePassword:function(){var a=this.input;a.attr("realType","password");this.isPassword=!0;if(b.browser.msie&&a[0].outerHTML){var c=b(a[0].outerHTML.replace(/type=(['"])?password\1/gi, -"type=$1text$1"));this.fakePassword=c.val(a.attr("placeholder")).addClass("placeholder").focus(function(){a.trigger("focus");b(this).hide()});b(a[0].form).submit(function(){c.remove();a.show()})}}};var e=!!("placeholder"in document.createElement("input"));b.fn.placeholder=function(){return e?this:this.each(function(){var a=b(this),c=new d(a);c.show(!0);a.focus(function(){c.hide()});a.blur(function(){c.show(!1)});b.browser.msie&&(b(window).load(function(){a.val()&&a.removeClass("placeholder");c.show(!0)}), -a.focus(function(){if(this.value==""){var a=this.createTextRange();a.collapse(!0);a.moveStart("character",0);a.select()}}))})}})(jQuery); +(function($){function Placeholder(input){this.input=input;if(input.attr("type")=="password"){this.handlePassword();}$(input[0].form).submit(function(){if(input.hasClass("placeholder")&&input[0].value==input.attr("placeholder")){input[0].value="";}});}Placeholder.prototype={show:function(loading){if(this.input[0].value===""||(loading&&this.valueIsPlaceholder())){if(this.isPassword){try{this.input[0].setAttribute("type","text");}catch(e){this.input.before(this.fakePassword.show()).hide();}}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){}this.input.show();this.input[0].focus();}}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder");},handlePassword:function(){var input=this.input;input.attr("realType","password");this.isPassword=true;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 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();});input.blur(function(){placeholder.show(false);});if($.browser.msie){$(window).load(function(){if(input.val()){input.removeClass("placeholder");}placeholder.show(true);});input.focus(function(){if(this.value==""){var range=this.createTextRange();range.collapse(true);range.moveStart("character",0);range.select();}});}});};})(jQuery); \ No newline at end of file