public
Last active

  • Download Gist
jQuery HTML5 placeholder fix.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
$('[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('');
}
})
});

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).

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!

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.

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

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

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

OK, thanks for clarifying. IE is a bitch!

On Thu, Apr 21, 2011 at 3:48 PM, hagenburger <
reply@reply.github.com>wrote:

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

Reply to this email directly or view it on GitHub:
https://gist.github.com/379601

Sam Grossberg
Outdrsy: plan adventures with your friends, meet new people, go outside
more.
http://outdrsy.com

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?

Yes, I do that in my project code before calling the function - should
probably just incorporate it into the gist.

On Thu, Apr 28, 2011 at 5:10 AM, slainer68 <
reply@reply.github.com>wrote:

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?

Reply to this email directly or view it on GitHub:
https://gist.github.com/379601

Sam Grossberg
Outdrsy: plan adventures with your friends, meet new people, go outside
more.
http://outdrsy.com

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."

Thanks! :)

On Mon, Jun 20, 2011 at 9:06 AM, BillScheurer <
reply@reply.github.com>wrote:

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."

Reply to this email directly or view it on GitHub:
https://gist.github.com/379601

Sam Grossberg
Outdrsy: plan adventures with your friends, meet new people, go outside
more.
http://outdrsy.com

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

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

https://gist.github.com/1320822

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

Hey,

Thanks for getting back to me. The new script works great. Only thing
is that it tricks the form into thinking that the placeholders are
actual input, which overrides my "Required Field" script.

But it's not a big deal to me, as long as it looks consistent across all
major browsers.

Thanks for your diligence!!

Nick Brunson
702.408.4250

nick@stellarcreativeservices.com
www.stellarcreativeservices.com

On 10/27/2011 2:24 PM, pjeweb wrote:

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

https://gist.github.com/1320822

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

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.

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

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

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

Nice Fix, it integrated pretty smooth.

coljung thanks for the feature detection!

Lovely work! Thanks!

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...

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

Any way to get it work on a password field?

Thank you very much, hagenburger

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

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

Thanks for the gist!

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

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

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.

@daebat just do:

            setTimeout(function(){

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

            }, 1);

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.