Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Added cross-browser support for type=password, based on sidonath’s fork.

  • Loading branch information...
commit add06843fa3792c2e5fb272aa0d72edf89ef9fcb 1 parent 22b94f3
@mathiasbynens authored
Showing with 45 additions and 15 deletions.
  1. +2 −1  README.md
  2. +41 −12 jquery.placeholder.js
  3. +2 −2 jquery.placeholder.min.js
View
3  README.md
@@ -14,6 +14,7 @@ This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/),
<input type="email" name="email" placeholder="e.g. address@example.ext">
<input type="url" name="url" placeholder="e.g. http://mathiasbynens.be/">
<input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
+ <input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
<input type="search" name="search" placeholder="Search this site…">
<textarea name="message" placeholder="Your message goes here"></textarea>
@@ -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
View
53 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 <http://mathiasbynens.be/>
*/
@@ -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 = $('<div>').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 = $('<input>', $.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);
});
});
View
4 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 <http://mathiasbynens.be/>
*/
-(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);
+(function(a){a.fn.placeholder=function(){if(this[0]&&'placeholder' in document.createElement('input')){return this}function b(f){var h=a('<div>').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('<input>',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);
Please sign in to comment.
Something went wrong with that request. Please try again.