This is a bit old - you may or may not notice the date on this post but it's over a year old. That doesn't mean it's not useful but we all know how fast things chance on the web so there's a chance that techniques and technologies described here could be a little dated.

JQuery HTML5 placeholder fix

I’ve revisited this post here – Revisiting HTML5 placeholder fixes I recommend you check that update out.

One of the nifty new features of HTML5 is the placeholder for forms which is added by putting in a placeholder value.

So I can use this everywhere I’ve just written a quick bit of jQuery to replicate the placeholder functionality in browser that don’t support. It also uses Modernizr to check if the browser already supports the placeholder technique.

To use this make sure you’ve included the jQuery and Modernizr files and then pop in the bit of code below or download and include the file.
(This is only tested so far with Modernizr v1.1 and jQuery v1.4.2)

[download id=”9″]

$(document).ready(function() {
      if($(this).val()=="" && $(this).attr("placeholder")!=""){
          if($(this).val()==$(this).attr("placeholder")) $(this).val("");
          if($(this).val()=="") $(this).val($(this).attr("placeholder"));