From d892478ee9dcbbe148292462f76f6d465976c463 Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Wed, 4 Nov 2015 15:55:46 -0800 Subject: [PATCH 1/9] added --- index.html | 2 +- jquery.placeholder.js | 17 ++++-- simulation.html | 120 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 insertions(+), 6 deletions(-) create mode 100644 simulation.html diff --git a/index.html b/index.html index 3a1a0b2..e0cacac 100644 --- a/index.html +++ b/index.html @@ -83,7 +83,7 @@

HTML5 Placeholder jQuery Plugin



- +

diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 500acf8..bb7d600 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -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. + */ + 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,7 +50,7 @@ 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) .bind({ 'focus.placeholder': clearPlaceholder, @@ -169,7 +176,7 @@ var input = this; var $input = $(input); - 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); @@ -255,7 +262,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); diff --git a/simulation.html b/simulation.html new file mode 100644 index 0000000..734bdf0 --- /dev/null +++ b/simulation.html @@ -0,0 +1,120 @@ + + + + + HTML5 placeholder jQuery Plugin + + + + +

HTML5 Placeholder jQuery Plugin

+ + Fork me on GitHub + +
+ Red + Green + Blue + +
+ + Apple + Banana + Pear + +
+ + + +
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+
+ + + +
+ + + +
+ + + +
+ + + +
+
+ + + +
+
+ + + +
+ + + + + + From c3675e755834d7a937d4ce2a6619d4e436c69749 Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Wed, 4 Nov 2015 16:02:51 -0800 Subject: [PATCH 2/9] ignore input type of checkbox, radio, and hidden --- jquery.placeholder.js | 1 + 1 file changed, 1 insertion(+) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index bb7d600..3a47540 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -52,6 +52,7 @@ return this.filter((isInputSupported ? 'textarea' : ':input') + '[' + (debugMode ? 'placeholder-x' : 'placeholder') + ']') .not('.'+settings.customClass) + .not(':radio, :checkbox, :hidden') .bind({ 'focus.placeholder': clearPlaceholder, 'blur.placeholder': setPlaceholder From 6a5f7481c3c6e1e1f09e8c504e596175ebc85c1a Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Wed, 4 Nov 2015 16:18:07 -0800 Subject: [PATCH 3/9] use this explicitly to make it clearer --- jquery.placeholder.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 3a47540..05182df 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -175,7 +175,7 @@ function clearPlaceholder(event, value) { var input = this; - var $input = $(input); + var $input = $(this); if (input.value === $input.attr((debugMode ? 'placeholder-x' : 'placeholder')) && $input.hasClass(settings.customClass)) { @@ -204,7 +204,7 @@ 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. From 97cbcf03d29e7b0f2cb03bc96f390a0606cd901e Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Wed, 4 Nov 2015 16:50:07 -0800 Subject: [PATCH 4/9] simplified test pages --- index.html | 7 +++++-- simulation.html | 7 +++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index e0cacac..6896fd8 100644 --- a/index.html +++ b/index.html @@ -22,13 +22,11 @@

HTML5 Placeholder jQuery Plugin

Red Green - Blue
Apple Banana - Pear
@@ -88,6 +86,11 @@

HTML5 Placeholder jQuery Plugin



+ + +
+
+
diff --git a/simulation.html b/simulation.html index 734bdf0..900a4cc 100644 --- a/simulation.html +++ b/simulation.html @@ -22,13 +22,11 @@

HTML5 Placeholder jQuery Plugin

Red Green - Blue
Apple Banana - Pear
@@ -88,6 +86,11 @@

HTML5 Placeholder jQuery Plugin



+ + +
+
+
From 8ed7d4a77a43b400f347576c084a22a26f9f0245 Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Thu, 5 Nov 2015 09:45:30 -0800 Subject: [PATCH 5/9] fixed issue preventing password placeholder from working --- jquery.placeholder.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 05182df..ab3a025 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -208,18 +208,8 @@ 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 === '') { From f4807303e0cc067e199e137ab7b9c716c5e5a591 Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Thu, 5 Nov 2015 09:56:09 -0800 Subject: [PATCH 6/9] small styling, renamed simulated demo page --- index.html | 8 ++++---- simulation.html => simulated.html | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) rename simulation.html => simulated.html (93%) diff --git a/index.html b/index.html index 6896fd8..a0bffed 100644 --- a/index.html +++ b/index.html @@ -5,10 +5,9 @@ HTML5 placeholder jQuery Plugin @@ -86,9 +85,10 @@

HTML5 Placeholder jQuery Plugin



- +
+ +
-

diff --git a/simulation.html b/simulated.html similarity index 93% rename from simulation.html rename to simulated.html index 900a4cc..365ec77 100644 --- a/simulation.html +++ b/simulated.html @@ -5,10 +5,9 @@ HTML5 placeholder jQuery Plugin @@ -86,9 +85,10 @@

HTML5 Placeholder jQuery Plugin



- +
+ +
-

From 7251d58a4043364cc014f0361bc50c1ac663293c Mon Sep 17 00:00:00 2001 From: Erik Montes Date: Thu, 5 Nov 2015 10:15:38 -0800 Subject: [PATCH 7/9] set demo pages form to GET to show submitted values when testing - also added some more cases to test on - minor styling --- index.html | 18 ++++++++++-------- simulated.html | 18 ++++++++++-------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index a0bffed..abfab8e 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,8 @@