Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
$('[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
Owner

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

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

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

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

@smkaur

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

@hagenburger
Owner

@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
@nicolasblanco

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
@BillScheurer

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
@NickBrunson

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

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

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

@NickBrunson
@edmcmanwich

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

@evpozdniakov

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

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

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

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

@bmw0679

Nice Fix, it integrated pretty smooth.

@joelataylor

coljung thanks for the feature detection!

@iamshawnrice

Lovely work! Thanks!

@Cunha1

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

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

@frd73

Any way to get it work on a password field?

@KhArtNJava

Thank you very much, hagenburger

@motsmanish

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

@jayseeg

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

Thanks for the gist!

@michaelflowersky

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

@rduboveckij

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('');
                }
            })
        });
    }
@daebat

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

@daebat just do:

            setTimeout(function(){

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

            }, 1);
@johnstew

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.