From add06843fa3792c2e5fb272aa0d72edf89ef9fcb Mon Sep 17 00:00:00 2001 From: Mathias Bynens Date: Sat, 21 Aug 2010 14:39:54 +0200 Subject: [PATCH] =?UTF-8?q?Added=20cross-browser=20support=20for=20type=3D?= =?UTF-8?q?password,=20based=20on=20sidonath=E2=80=99s=20fork.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 ++- jquery.placeholder.js | 53 ++++++++++++++++++++++++++++++--------- jquery.placeholder.min.js | 4 +-- 3 files changed, 45 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index d3341ea..5cad572 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/), + @@ -30,8 +31,8 @@ The plugin automatically adds `class="placeholder"` to the elements who are curr ## Notes +* Works in all A-grade browsers, including IE6. * The plugin automatically checks if the browser supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything. -* The plugin will ignore password inputs. ## Credits diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 2e46d05..fd8793c 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,5 +1,5 @@ /*! - * HTML5 Placeholder jQuery Plugin v1.2 + * HTML5 Placeholder jQuery Plugin v1.3 * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin * @author Mathias Bynens */ @@ -9,17 +9,50 @@ if (this[0] && 'placeholder' in document.createElement('input')) { // Allow chaining return this; - }; + } + function args($elem) { + // Get attributes string from outerHTML + var html = $('
').append($elem.clone()).html().replace(/<(\w+)\s+(.*)>/, '$2'), + attr, + attrs = {}; + while ((attr = html.match(/\s*([\w-]+)=("[^"]*"|'[^']*'|\w+)/))) { + // Assign attribute to dictionary, but remove quotes first + attrs[attr[1]] = attr[2].replace(/^(["'])(.*?)\1$/, '$2'); + html = html.replace(attr[0], ''); + } + return attrs; + } + function onFocus() { + var $input = $(this); + if ($input.val() === $input.attr('placeholder') && $input.hasClass('placeholder')) { + if ($input.data('placeholder-password')) { + $input.next().show().focus().end().remove(); + } else { + $input.val('').removeClass('placeholder'); + } + } + } // Made this a function, because we actually need it on two different occasions: // 1) Once when the DOM is loaded; // 2) Once every time the focusout() is triggered. function setPlaceholder($elem) { + var $replacement; if ($elem.val() === '' || $elem.val() === $elem.attr('placeholder')) { + if ($elem.is(':password')) { + try { + $replacement = $elem.clone().attr({ type: 'text' }); + } catch(e) { + $replacement = $('', $.extend(args($elem), { type: 'text' })); + } + $replacement.data('placeholder-password', true).focus(onFocus); + $elem.hide().before($replacement); + $elem = $replacement; + } $elem.addClass('placeholder').val($elem.attr('placeholder')); } else { $elem.removeClass('placeholder'); - }; - }; + } + } // Look for forms with inputs and/or textareas with a placeholder attribute in them $('form:has([placeholder])').submit(function() { // Clear the placeholder values so they don’t get submitted @@ -32,16 +65,12 @@ // Yes, .each() — in case .placeholder() is called on several elements, which is very likely, e.g. $('input').placeholder(); return this.each(function() { var $input = $(this); - // Quit if the current element is a password input, or not an input/textarea at all - if ($input.is(':password') || !$input.is(':input')) { + // Quit if the current element is not an input/textarea at all + if (!$input.is(':input')) { return; - }; + } setPlaceholder($input); - $input.focus(function() { - if ($input.val() === $input.attr('placeholder')) { - $input.val('').removeClass('placeholder'); - }; - }).blur(function() { + $input.focus(onFocus).blur(function() { setPlaceholder($input); }); }); diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js index 16b2e34..a77d3c0 100644 --- a/jquery.placeholder.min.js +++ b/jquery.placeholder.min.js @@ -1,6 +1,6 @@ /*! - * HTML5 Placeholder jQuery Plugin v1.2 + * HTML5 Placeholder jQuery Plugin v1.3 * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin * @author Mathias Bynens */ -(function(a){a.fn.placeholder=function(){if(this[0]&&'placeholder' in document.createElement('input')){return this}function b(c){if(c.val()===''||c.val()===c.attr('placeholder')){c.addClass('placeholder').val(c.attr('placeholder'))}else{c.removeClass('placeholder')}}a('form:has([placeholder])').submit(function(){a('.placeholder',this).val('')});a(window).unload(function(){a('.placeholder').val('')});return this.each(function(){var c=a(this);if(c.is(':password')||!c.is(':input')){return}b(c);c.focus(function(){if(c.val()===c.attr('placeholder')){c.val('').removeClass('placeholder')}}).blur(function(){b(c)})})}})(jQuery); \ No newline at end of file +(function(a){a.fn.placeholder=function(){if(this[0]&&'placeholder' in document.createElement('input')){return this}function b(f){var h=a('
').append(f.clone()).html().replace(/<(\w+)\s+(.*)>/,'$2'),e,g={};while((e=h.match(/\s*([\w-]+)=("[^"]*"|'[^']*'|\w+)/))){g[e[1]]=e[2].replace(/^(["'])(.*?)\1$/,'$2');h=h.replace(e[0],'')}return g}function c(){var e=a(this);if(e.val()===e.attr('placeholder')&&e.hasClass('placeholder')){if(e.data('placeholder-password')){e.next().show().focus().end().remove()}else{e.val('').removeClass('placeholder')}}}function d(f){var h;if(f.val()===''||f.val()===f.attr('placeholder')){if(f.is(':password')){try{h=f.clone().attr({type:'text'})}catch(g){h=a('',a.extend(b(f),{type:'text'}))}h.data('placeholder-password',true).focus(c);f.hide().before(h);f=h}f.addClass('placeholder').val(f.attr('placeholder'))}else{f.removeClass('placeholder')}}a('form:has([placeholder])').submit(function(){a('.placeholder',this).val('')});a(window).unload(function(){a('.placeholder').val('')});return this.each(function(){var e=a(this);if(!e.is(':input')){return}d(e);e.focus(c).blur(function(){d(e)})})}})(jQuery); \ No newline at end of file