Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Released under MIT license: http://www.opensource.org/licenses/mit-license.php
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.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('');
}
})
});
@hagenburger

This comment has been minimized.

Show comment
Hide comment
@hagenburger

hagenburger Sep 29, 2010

Added a check in line 9 if the input is already filled with the placeholder text at startup (this happens when you hit refresh in Firefox).

Owner

hagenburger commented Sep 29, 2010

Added a check in line 9 if the input is already filled with the placeholder text at startup (this happens when you hit refresh in Firefox).

@samgro

This comment has been minimized.

Show comment
Hide comment
@samgro

samgro Feb 12, 2011

Check out my fork - I fixed some syntax issues (missing semi-colons, == instead of ===) and made this into a plugin. I like this code - very concise and effective. Thanks!

samgro commented Feb 12, 2011

Check out my fork - I fixed some syntax issues (missing semi-colons, == instead of ===) and made this into a plugin. I like this code - very concise and effective. Thanks!

@samgro

This comment has been minimized.

Show comment
Hide comment
@samgro

samgro Feb 14, 2011

Fixed a bug in my fork (823300) where the user can't enter text that is identical to the placeholder (an edge case admittedly) and added code to restore the placeholder after AJAX submit.

samgro commented Feb 14, 2011

Fixed a bug in my fork (823300) where the user can't enter text that is identical to the placeholder (an edge case admittedly) and added code to restore the placeholder after AJAX submit.

@jobster

This comment has been minimized.

Show comment
Hide comment
@jobster

jobster Feb 22, 2011

I love it! Simple, small, and functional. Just how good code should be. Thanks!

jobster commented Feb 22, 2011

I love it! Simple, small, and functional. Just how good code should be. Thanks!

@smkaur

This comment has been minimized.

Show comment
Hide comment
@smkaur

smkaur Apr 21, 2011

This does not work for IE 8 or IE 9. Can you please give guidance as to why it does not?

smkaur commented Apr 21, 2011

This does not work for IE 8 or IE 9. Can you please give guidance as to why it does not?

@hagenburger

This comment has been minimized.

Show comment
Hide comment
@hagenburger

hagenburger Apr 21, 2011

@smkaur there was one semicolon missing for the IE parser in the JavaScript on my website. I fixed this. The code should work as showen.

Owner

hagenburger commented Apr 21, 2011

@smkaur there was one semicolon missing for the IE parser in the JavaScript on my website. I fixed this. The code should work as showen.

@samgro

This comment has been minimized.

Show comment
Hide comment
@samgro

samgro Apr 22, 2011

samgro commented Apr 22, 2011

@nicolasblanco

This comment has been minimized.

Show comment
Hide comment
@nicolasblanco

nicolasblanco Apr 28, 2011

Great gist.

But would it be better to first check if browser supports the placeholder attribute and only execute the code if it doesn't?

Great gist.

But would it be better to first check if browser supports the placeholder attribute and only execute the code if it doesn't?

@samgro

This comment has been minimized.

Show comment
Hide comment
@samgro

samgro Apr 28, 2011

samgro commented Apr 28, 2011

@BillScheurer

This comment has been minimized.

Show comment
Hide comment
@BillScheurer

BillScheurer Jun 20, 2011

Nico, this is great! Trolled the web for many jQuery plugins to solve this problem. You simple code does the trick!

"Ferris Buehler, you're my hero."

Nico, this is great! Trolled the web for many jQuery plugins to solve this problem. You simple code does the trick!

"Ferris Buehler, you're my hero."

@samgro

This comment has been minimized.

Show comment
Hide comment
@samgro

samgro Jun 20, 2011

samgro commented Jun 20, 2011

@NickBrunson

This comment has been minimized.

Show comment
Hide comment
@NickBrunson

NickBrunson Sep 26, 2011

Hi. I'm searching for a fix to force placeholders in IE. Came across this one and it seems pretty simple, but IE is still not displaying my placeholders. I'm sure I've missed something obvious, admittedly I'm not very good with jQuery.

You can view the site here: http://www.stellarcreativeservices.com

Thanks in advance for your help!!

  • Nick

Hi. I'm searching for a fix to force placeholders in IE. Came across this one and it seems pretty simple, but IE is still not displaying my placeholders. I'm sure I've missed something obvious, admittedly I'm not very good with jQuery.

You can view the site here: http://www.stellarcreativeservices.com

Thanks in advance for your help!!

  • Nick
@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

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

@mathiasbynens

This comment has been minimized.

Show comment
Hide comment
@mathiasbynens

mathiasbynens Oct 28, 2011

Here’s a much more robust jQuery plugin that detects native support and only polyfills when necessary: http://mths.be/placeholder

Here’s a much more robust jQuery plugin that detects native support and only polyfills when necessary: http://mths.be/placeholder

@NickBrunson

This comment has been minimized.

Show comment
Hide comment
@NickBrunson

NickBrunson Oct 31, 2011

@edmcmanwich

This comment has been minimized.

Show comment
Hide comment
@edmcmanwich

edmcmanwich Feb 29, 2012

Is there anyway to clear the form when using onchange to submit the form?

Is there anyway to clear the form when using onchange to submit the form?

@evpozdniakov

This comment has been minimized.

Show comment
Hide comment
@evpozdniakov

evpozdniakov Jun 11, 2012

hey! there is a small defect in Chrome (for Windows at least) — after focus event happened, the placeholder text is still shown in the input field, and it has no placeholder style.

hey! there is a small defect in Chrome (for Windows at least) — after focus event happened, the placeholder text is still shown in the input field, and it has no placeholder style.

@coljung

This comment has been minimized.

Show comment
Hide comment
@coljung

coljung Jun 20, 2012

Great snippet !
I'm using it with the placeholder feature detection:

placeholderSupport = ("placeholder" in document.createElement("input"));

if(!placeholderSupport ){
//your code here
}

coljung commented Jun 20, 2012

Great snippet !
I'm using it with the placeholder feature detection:

placeholderSupport = ("placeholder" in document.createElement("input"));

if(!placeholderSupport ){
//your code here
}

@bmw0679

This comment has been minimized.

Show comment
Hide comment
@bmw0679

bmw0679 Jul 25, 2012

Nice Fix, it integrated pretty smooth.

bmw0679 commented Jul 25, 2012

Nice Fix, it integrated pretty smooth.

@joelataylor

This comment has been minimized.

Show comment
Hide comment
@joelataylor

joelataylor Sep 14, 2012

coljung thanks for the feature detection!

coljung thanks for the feature detection!

@iamshawnrice

This comment has been minimized.

Show comment
Hide comment
@iamshawnrice

iamshawnrice Mar 7, 2013

Lovely work! Thanks!

Lovely work! Thanks!

@Cunha1

This comment has been minimized.

Show comment
Hide comment
@Cunha1

Cunha1 Apr 20, 2013

For some reason, it still doesn't work in IE9.
also, placeholders on http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html don't work in ie9 either...

Cunha1 commented Apr 20, 2013

For some reason, it still doesn't work in IE9.
also, placeholders on http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html don't work in ie9 either...

@VivekVikranth

This comment has been minimized.

Show comment
Hide comment
@VivekVikranth

VivekVikranth May 23, 2013

But There is a problem with while using placeholder for text area.What to do?

But There is a problem with while using placeholder for text area.What to do?

@frd73

This comment has been minimized.

Show comment
Hide comment
@frd73

frd73 Jun 3, 2013

Any way to get it work on a password field?

frd73 commented Jun 3, 2013

Any way to get it work on a password field?

@KhArtNJava

This comment has been minimized.

Show comment
Hide comment
@KhArtNJava

KhArtNJava Jul 8, 2013

Thank you very much, hagenburger

Thank you very much, hagenburger

@motsmanish

This comment has been minimized.

Show comment
Hide comment
@motsmanish

motsmanish Oct 8, 2013

Not working for hidden fields on the page that become visible later. via JQuery/JavaScript code. Any help?

Not working for hidden fields on the page that become visible later. via JQuery/JavaScript code. Any help?

@jayseeg

This comment has been minimized.

Show comment
Hide comment
@jayseeg

jayseeg Oct 15, 2013

Threw Coljung's detection and some strict comparison into another gist:
https://gist.github.com/jayseeg/6998790

Thanks for the gist!

jayseeg commented Oct 15, 2013

Threw Coljung's detection and some strict comparison into another gist:
https://gist.github.com/jayseeg/6998790

Thanks for the gist!

@michaelflowersky

This comment has been minimized.

Show comment
Hide comment
@michaelflowersky

michaelflowersky Nov 5, 2013

You saved my time! Great gist. Thanks for that!

You saved my time! Great gist. Thanks for that!

@rduboveckij

This comment has been minimized.

Show comment
Hide comment
@rduboveckij

rduboveckij Mar 20, 2014

He. It's the good simple but I find bug and fix it(if you enter placeholder value to input, text is retire):

    var isInputSupported = 'placeholder' in document.createElement('input');
    var isTextareaSupported = 'placeholder' in document.createElement('textarea');
    if (!isInputSupported || !isTextareaSupported) {
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
                input.data('placeholder', true);
            } else {
                input.data('placeholder', false);
            }
        }).blur().parents('form').submit(function () {
            $(this).find('[placeholder]').each(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                    input.val('');
                }
            })
        });
    }

He. It's the good simple but I find bug and fix it(if you enter placeholder value to input, text is retire):

    var isInputSupported = 'placeholder' in document.createElement('input');
    var isTextareaSupported = 'placeholder' in document.createElement('textarea');
    if (!isInputSupported || !isTextareaSupported) {
        $('[placeholder]').focus(function () {
            var input = $(this);
            if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function () {
            var input = $(this);
            if (input.val() == '') {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
                input.data('placeholder', true);
            } else {
                input.data('placeholder', false);
            }
        }).blur().parents('form').submit(function () {
            $(this).find('[placeholder]').each(function () {
                var input = $(this);
                if (input.val() == input.attr('placeholder') && input.data('placeholder')) {
                    input.val('');
                }
            })
        });
    }
@artslop

This comment has been minimized.

Show comment
Hide comment
@artslop

artslop Apr 10, 2014

I tried this script and for some reason when I load the page the placeholder is missing but when I click and then click off of the input the placeholder is injected in. Any ideas? The site is local so I don't have a link unfortunately.

artslop commented Apr 10, 2014

I tried this script and for some reason when I load the page the placeholder is missing but when I click and then click off of the input the placeholder is injected in. Any ideas? The site is local so I don't have a link unfortunately.

@heldrida

This comment has been minimized.

Show comment
Hide comment
@heldrida

heldrida Apr 10, 2014

@daebat just do:

            setTimeout(function(){

               $('[placeholder]').trigger("blur");

            }, 1);

@daebat just do:

            setTimeout(function(){

               $('[placeholder]').trigger("blur");

            }, 1);
@johnstew

This comment has been minimized.

Show comment
Hide comment
@johnstew

johnstew Aug 29, 2014

This is really good and I've seen a lot of other improvements but I have one thing that one of my clients showed me that I thought was interesting. In IE8 with this plug and play code when you click in the input field the value or are make shift "Placeholder" in this case disappears. This behavior is not consistent with actual placeholders.

Actual placeholders are still visible when the user clicks into an input field. Only once the user starts typing does the placeholder go away. So I tried recreating this experience because my client said that is confusing. I think it is personally fine the way it is when you click in and the "Placeholder" goes away but the client is always right so I decided that I would make a small change to this snippet.

Instead of doing .focus I used .keypress and it seemed to work okay. Kind of weird but was wondering if anyone either suggested this solution or if someone had a better solution for this situation.

This is really good and I've seen a lot of other improvements but I have one thing that one of my clients showed me that I thought was interesting. In IE8 with this plug and play code when you click in the input field the value or are make shift "Placeholder" in this case disappears. This behavior is not consistent with actual placeholders.

Actual placeholders are still visible when the user clicks into an input field. Only once the user starts typing does the placeholder go away. So I tried recreating this experience because my client said that is confusing. I think it is personally fine the way it is when you click in and the "Placeholder" goes away but the client is always right so I decided that I would make a small change to this snippet.

Instead of doing .focus I used .keypress and it seemed to work okay. Kind of weird but was wondering if anyone either suggested this solution or if someone had a better solution for this situation.

@piyush-v-n

This comment has been minimized.

Show comment
Hide comment
@piyush-v-n

piyush-v-n Jan 14, 2015

It seems to be problem with IE 8. So when i have placeholder text where I have a password field. It replaces with *** in value.
please suggest me a solution.

It seems to be problem with IE 8. So when i have placeholder text where I have a password field. It replaces with *** in value.
please suggest me a solution.

@smxi

This comment has been minimized.

Show comment
Hide comment
@smxi

smxi Jan 12, 2016

I can by the way confirm that this doesn't work as expected in MSIE 8, the placeholders don't show up on page load.

smxi commented Jan 12, 2016

I can by the way confirm that this doesn't work as expected in MSIE 8, the placeholders don't show up on page load.

@smxi

This comment has been minimized.

Show comment
Hide comment
@smxi

smxi Jan 12, 2016

Just as an aside, this would NEVER have worked as expected, because the original code never loads the contents of the placeholder on page load.

I'll fork this with correct code, and link to that, rather than adding more confusion to this page.

Again, I would recommend against using the top code as is because it's incomplete and technically wrong, but the core logic is fine, just incomplete and inadequate to most standard use cases. It looks like it wasn't actually tested on the browsers it was targeted at since the issues would have been obvious immediately.

smxi commented Jan 12, 2016

Just as an aside, this would NEVER have worked as expected, because the original code never loads the contents of the placeholder on page load.

I'll fork this with correct code, and link to that, rather than adding more confusion to this page.

Again, I would recommend against using the top code as is because it's incomplete and technically wrong, but the core logic is fine, just incomplete and inadequate to most standard use cases. It looks like it wasn't actually tested on the browsers it was targeted at since the issues would have been obvious immediately.

@leoyb

This comment has been minimized.

Show comment
Hide comment

leoyb commented May 19, 2016

This is imperfect way. please refer https://github.com/mathiasbynens/jquery-placeholder.

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