From 1f9ea0e87c3b4f486739a26024018153ccc53471 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 20 Sep 2011 16:08:02 +0800 Subject: [PATCH 1/6] Adds custom placeholder className option. --- jquery.placeholder.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 694e761..adf69b0 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -14,7 +14,10 @@ } else { - $.fn.placeholder = function() { + var placeholderClassName = 'placeholder'; + + $.fn.placeholder = function(className) { + placeholderClassName = className || placeholderClassName; return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') .bind('focus.placeholder', clearPlaceholder) .bind('blur.placeholder', setPlaceholder) @@ -28,7 +31,7 @@ // Look for forms $('form').bind('submit.placeholder', function() { // Clear the placeholder values so they don’t get submitted - var $inputs = $('.placeholder', this).each(clearPlaceholder); + var $inputs = $('.' + placeholderClassName, this).each(clearPlaceholder); setTimeout(function() { $inputs.each(setPlaceholder); }, 10); @@ -37,7 +40,7 @@ // Clear placeholder values upon page reload $(window).bind('unload.placeholder', function() { - $('.placeholder').val(''); + $('.' + placeholderClassName).val(''); }); } @@ -56,11 +59,11 @@ function clearPlaceholder() { var $input = $(this); - if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) { + if ($input.val() === $input.attr('placeholder') && $input.hasClass(placeholderClassName)) { if ($input.data('placeholder-password')) { $input.hide().next().show().focus().attr('id', $input.removeAttr('id').data('placeholder-id')); } else { - $input.val('').removeClass('placeholder'); + $input.val('').removeClass(placeholderClassName); } } } @@ -91,9 +94,9 @@ } $input = $input.removeAttr('id').hide().prev().attr('id', id).show(); } - $input.addClass('placeholder').val($input.attr('placeholder')); + $input.addClass(placeholderClassName).val($input.attr('placeholder')); } else { - $input.removeClass('placeholder'); + $input.removeClass(placeholderClassName); } } From cfb623fc972bcc25067f613fe33febc4e029e5bc Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Tue, 20 Sep 2011 17:18:22 +0800 Subject: [PATCH 2/6] Fixes silly scoping and uses $.fn.placeholder.className for config. --- jquery.placeholder.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index adf69b0..616a292 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -2,7 +2,8 @@ ;(function(window, document, $) { var isInputSupported = 'placeholder' in document.createElement('input'), - isTextareaSupported = 'placeholder' in document.createElement('textarea'); + isTextareaSupported = 'placeholder' in document.createElement('textarea'), + placeholderClassName = 'placeholder'; if (isInputSupported && isTextareaSupported) { @@ -14,10 +15,8 @@ } else { - var placeholderClassName = 'placeholder'; - - $.fn.placeholder = function(className) { - placeholderClassName = className || placeholderClassName; + $.fn.placeholder = function() { + placeholderClassName = $.fn.placeholder.className || placeholderClassName; return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') .bind('focus.placeholder', clearPlaceholder) .bind('blur.placeholder', setPlaceholder) From d396b513cdfb142189de180ac31cde49f1fab555 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 21 Sep 2011 18:42:44 +0800 Subject: [PATCH 3/6] Use $.fn.placeholder.className wherever possible. --- jquery.placeholder.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 616a292..c7fdc87 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -2,8 +2,7 @@ ;(function(window, document, $) { var isInputSupported = 'placeholder' in document.createElement('input'), - isTextareaSupported = 'placeholder' in document.createElement('textarea'), - placeholderClassName = 'placeholder'; + isTextareaSupported = 'placeholder' in document.createElement('textarea'); if (isInputSupported && isTextareaSupported) { @@ -16,13 +15,13 @@ } else { $.fn.placeholder = function() { - placeholderClassName = $.fn.placeholder.className || placeholderClassName; return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') .bind('focus.placeholder', clearPlaceholder) .bind('blur.placeholder', setPlaceholder) .trigger('blur.placeholder').end(); }; + $.fn.placeholder.className = 'placeholder'; $.fn.placeholder.input = isInputSupported; $.fn.placeholder.textarea = isTextareaSupported; @@ -30,7 +29,7 @@ // Look for forms $('form').bind('submit.placeholder', function() { // Clear the placeholder values so they don’t get submitted - var $inputs = $('.' + placeholderClassName, this).each(clearPlaceholder); + var $inputs = $('.' + $.fn.placeholder.className, this).each(clearPlaceholder); setTimeout(function() { $inputs.each(setPlaceholder); }, 10); @@ -39,7 +38,7 @@ // Clear placeholder values upon page reload $(window).bind('unload.placeholder', function() { - $('.' + placeholderClassName).val(''); + $('.' + $.fn.placeholder.className).val(''); }); } @@ -57,7 +56,8 @@ } function clearPlaceholder() { - var $input = $(this); + var $input = $(this), + placeholderClassName = $.fn.placeholder.className; if ($input.val() === $input.attr('placeholder') && $input.hasClass(placeholderClassName)) { if ($input.data('placeholder-password')) { $input.hide().next().show().focus().attr('id', $input.removeAttr('id').data('placeholder-id')); @@ -71,7 +71,8 @@ var $replacement, $input = $(this), $origInput = $input, - id = this.id; + id = this.id, + placeholderClassName = $.fn.placeholder.className; if ($input.val() === '') { if ($input.is(':password')) { if (!$input.data('placeholder-textinput')) { From 79bf24d8bdd1d9a9523ed1dfb74b976f76f89248 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 21 Sep 2011 18:49:52 +0800 Subject: [PATCH 4/6] Only bind domready and unload event (once) when placeholder is called. --- jquery.placeholder.js | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index c7fdc87..c26c96c 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -15,6 +15,23 @@ } else { $.fn.placeholder = function() { + + $().one('ready', function() { + // Look for forms + $('form').bind('submit.placeholder', function() { + // Clear the placeholder values so they don’t get submitted + var $inputs = $('.' + $.fn.placeholder.className, this).each(clearPlaceholder); + setTimeout(function() { + $inputs.each(setPlaceholder); + }, 10); + }); + }); + + // Clear placeholder values upon page reload + $(window).one('unload.placeholder', function() { + $('.' + $.fn.placeholder.className).val(''); + }); + return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') .bind('focus.placeholder', clearPlaceholder) .bind('blur.placeholder', setPlaceholder) @@ -25,22 +42,6 @@ $.fn.placeholder.input = isInputSupported; $.fn.placeholder.textarea = isTextareaSupported; - $(function() { - // Look for forms - $('form').bind('submit.placeholder', function() { - // Clear the placeholder values so they don’t get submitted - var $inputs = $('.' + $.fn.placeholder.className, this).each(clearPlaceholder); - setTimeout(function() { - $inputs.each(setPlaceholder); - }, 10); - }); - }); - - // Clear placeholder values upon page reload - $(window).bind('unload.placeholder', function() { - $('.' + $.fn.placeholder.className).val(''); - }); - } function args(elem) { From 5e9201f6ef15abc088826383de5151048ecb71d1 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Wed, 21 Sep 2011 23:49:28 +0800 Subject: [PATCH 5/6] Assume the dom is ready by the time .placeholder is called. Add `initialized` variable to prevent the events binded more than once. --- jquery.placeholder.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index c26c96c..d4c6652 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -14,9 +14,10 @@ } else { + var initialized = false; $.fn.placeholder = function() { - $().one('ready', function() { + if (!initialized){ // Look for forms $('form').bind('submit.placeholder', function() { // Clear the placeholder values so they don’t get submitted @@ -25,12 +26,14 @@ $inputs.each(setPlaceholder); }, 10); }); - }); - // Clear placeholder values upon page reload - $(window).one('unload.placeholder', function() { - $('.' + $.fn.placeholder.className).val(''); - }); + // Clear placeholder values upon page reload + $(window).bind('unload.placeholder', function() { + $('.' + $.fn.placeholder.className).val(''); + }); + + initialized = true; + } return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') .bind('focus.placeholder', clearPlaceholder) From d35af818fabb833a33a1f4290eb6c0bf834d3185 Mon Sep 17 00:00:00 2001 From: Lim Chee Aun Date: Thu, 22 Sep 2011 10:40:07 +0800 Subject: [PATCH 6/6] Move and cache some variables. --- jquery.placeholder.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/jquery.placeholder.js b/jquery.placeholder.js index d4c6652..3fb9835 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -2,7 +2,8 @@ ;(function(window, document, $) { var isInputSupported = 'placeholder' in document.createElement('input'), - isTextareaSupported = 'placeholder' in document.createElement('textarea'); + isTextareaSupported = 'placeholder' in document.createElement('textarea'), + initialized = false; if (isInputSupported && isTextareaSupported) { @@ -14,14 +15,14 @@ } else { - var initialized = false; $.fn.placeholder = function() { + var className = $.fn.placeholder.className; if (!initialized){ // Look for forms $('form').bind('submit.placeholder', function() { // Clear the placeholder values so they don’t get submitted - var $inputs = $('.' + $.fn.placeholder.className, this).each(clearPlaceholder); + var $inputs = $('.' + className, this).each(clearPlaceholder); setTimeout(function() { $inputs.each(setPlaceholder); }, 10); @@ -29,9 +30,9 @@ // Clear placeholder values upon page reload $(window).bind('unload.placeholder', function() { - $('.' + $.fn.placeholder.className).val(''); + $('.' + className).val(''); }); - + initialized = true; }