Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php
// good javascript
(function ($) {
'use strict';
$(function () {
$('[placeholder]')
.focus(function () {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('').removeClass('placeholder');
}
})
.blur(function () {
var input = $(this);
if (input.val() === '' || input.val() === input.attr('placeholder')) {
input.addClass('placeholder').val(input.attr('placeholder'));
}
})
.blur()
.parents('form').submit(function () {
$(this).find('[placeholder]').each(function () {
var input = $(this);
if (input.val() === input.attr('placeholder')) {
input.val('');
}
});
});
});
})(jQuery);
// minified javascript
(function(j,p){j(function(){j("["+p+"]").focus(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("").removeClass(p)}}).blur(function(){var i=j(this);if(i.val()===""||i.val()===i.attr(p)){i.addClass(p).val(c.attr(p))}}).blur().parents("form").submit(function(){j(this).find(p).each(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("")}})})})})(jQuery,"placeholder");
@pjeweb

This comment has been minimized.

Show comment Hide comment
@pjeweb

pjeweb Oct 27, 2011

I wrote a "better" version (conflict free, more performant, on document ready)
and a hand-minified version of it

https://gist.github.com/1320822

Owner

pjeweb commented Oct 27, 2011

I wrote a "better" version (conflict free, more performant, on document ready)
and a hand-minified version of it

https://gist.github.com/1320822

@kyleellman

This comment has been minimized.

Show comment Hide comment
@kyleellman

kyleellman Nov 29, 2011

Does this work with passwords and textareas as well?

Does this work with passwords and textareas as well?

@rozboris

This comment has been minimized.

Show comment Hide comment
@rozboris

rozboris Aug 6, 2012

Thanks for a good solution!

There was a typo in the minified version ('c' is undefined on col.211), so I fixed it:
(function(j,p){j(function(){j("["+p+"]").focus(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("").removeClass(p)}}).blur(function(){var i=j(this);if(i.val()===""||i.val()===i.attr(p)){i.addClass(p).val(i.attr(p))}}).blur().parents("form").submit(function(){j(this).find(p).each(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("")}})})})})(jQuery,"placeholder");

rozboris commented Aug 6, 2012

Thanks for a good solution!

There was a typo in the minified version ('c' is undefined on col.211), so I fixed it:
(function(j,p){j(function(){j("["+p+"]").focus(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("").removeClass(p)}}).blur(function(){var i=j(this);if(i.val()===""||i.val()===i.attr(p)){i.addClass(p).val(i.attr(p))}}).blur().parents("form").submit(function(){j(this).find(p).each(function(){var i=j(this);if(i.val()===i.attr(p)){i.val("")}})})})})(jQuery,"placeholder");

@sshivers

This comment has been minimized.

Show comment Hide comment
@sshivers

sshivers Dec 17, 2012

Thanks for this. https://gist.github.com/379601 wasn't working in IE8.

Thanks for this. https://gist.github.com/379601 wasn't working in IE8.

@skube

This comment has been minimized.

Show comment Hide comment
@skube

skube Apr 16, 2013

Doesn't seem to work properly when using the HTML5 required attribute.

skube commented Apr 16, 2013

Doesn't seem to work properly when using the HTML5 required attribute.

@arelenglish

This comment has been minimized.

Show comment Hide comment
@arelenglish

arelenglish Aug 2, 2013

Awesome!! Thanks @rozboris

Awesome!! Thanks @rozboris

@futuralis

This comment has been minimized.

Show comment Hide comment
@futuralis

futuralis Oct 11, 2013

Shouldn't the placeholder be whatever you define, "Password" rather than "********"? How to accomplish that?

Shouldn't the placeholder be whatever you define, "Password" rather than "********"? How to accomplish that?

@atentis

This comment has been minimized.

Show comment Hide comment
@atentis

atentis Sep 24, 2014

This is not working with ie8 for me.

Edit: Correction. It must be getting wiped out by the json in ie8/9 which is not an issue in 10+. Ugh

atentis commented Sep 24, 2014

This is not working with ie8 for me.

Edit: Correction. It must be getting wiped out by the json in ie8/9 which is not an issue in 10+. Ugh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment