Use the html5 placeholder attribute now

// jQuery code
var i = document.createElement("input");

// Only bind if placeholder isn't natively supported by the browser
if (!("placeholder" in i)) {
    $("input[placeholder]").each(function () {
        var self = $(this);
        self.val(self.attr("placeholder")).bind({
            focus: function () {
                if (self.val() === self.attr("placeholder")) {
                    self.val("");
                }
            },
            blur: function () {
                var label = self.attr("placeholder");
                if (label && self.val() === "") {
                    self.val(label);
                }
            }
        });
    });
}

Discussion 9 comments - RSS feed

1. Phillip Tuesday, October 12th, 2010 at 11:28 pm

   Thanks for sharing this tips.

2. fenderbirds Monday, October 18th, 2010 at 5:35 pm

   nice article, keep the posts coming

3. radiology technician Thursday, November 11th, 2010 at 11:00 am

   Thank you, I have recently been searching for information about this topic for ages and yours is the best I have discovered so far.

4. david Wednesday, November 17th, 2010 at 10:28 am

   sweet

5. Ron Tedwater Thursday, November 18th, 2010 at 2:34 am

   Thanks for the post

6. Jerica Eickhoff Thursday, November 18th, 2010 at 2:42 am

   It’s not that I want to duplicate your internet site, but I really like the design. Could you tell me which theme are you using? Or was it tailor made?

7. student grants Thursday, December 16th, 2010 at 1:14 am

   What a great resource!

8. logo designer Friday, January 21st, 2011 at 6:35 am

   wohh just what I was searching for, appreciate it for putting up .

9. Mark C. Friday, October 14th, 2011 at 10:03 am

   Great post for workaround in stupid ie browsers!