I had a detailed look at my analytics for the first time in a while and I noticed I pick up quite a bit of traffic from StackOverflow.com which was quite interesting. Digging further I had a look and found most of it is to the quick JQuery based HTML5 placeholder fix I posted a while ago.
As pointed out by some Stack Overflow commenters there are elements of the coding that are less than ideal so I thought I’d address them and see what can be done.

It’s worthwhile revisiting things, after all we learn from what we do and I’m sure we can all look back on stuff we’ve coded and see ways to improve. The two main complaints I’ve seen with the old code is the repeated use of $(this) and that the form could well be submitted with the placeholder text in place.

I will say though I haven’t done a whole lot of JQuery work in recent times so please if you can see errors or improvements for this code please leave a comment!

Firstly to change the problem of repeated use of $(this).

$(document).ready(function() {

if(!Modernizr.input.placeholder){

$("input").each(
function(){
var inputField = $(this);
if(inputField.val()=="" && inputField.attr("placeholder")!=""){

inputField.val(inputField.attr("placeholder"));

inputField.focus(function(){
if(inputField.val()==inputField.attr("placeholder")){ inputField.val(""); }
});

inputField.blur(function(){
if(inputField.val()==""){ inputField.val(inputField.attr("placeholder")); }
});

}
});

}

});

So from this we simply assign $(this) to a variable which stops the code looking things up every time and simply using the stored variable.

Secondly to stop the code submitting the placeholder text let’s use something like this :

$(inputField).closest('form').submit(function(){
        var form = $(this);
        if(!form.hasClass('placeholderPending')){
          $('input',this).each(function(){
            var clearInput = $(this);
            if(clearInput.val()==clearInput.attr("placeholder")){ clearInput.val(""); }
          });
          form.addClass('placeholderPending');
        }
      });

That will look at the parent form of the element and attach a function for when that is submitted. When it is submitted it will loop through the input elements and remove any values that match the placeholder text. It also adds a class placeholderPending, so that it will only loop through the form once, without the class it will go over the form for each element in the form. So if you have 4 input elements it would loop over the form four times to check for placeholder values, adding the class avoids that.

That leaves a full bit of code like this

$(document).ready(function() {
if(!Modernizr.input.placeholder){
  $("input").each(
  function(){
    var inputField = $(this);
    if(inputField.val()=="" && inputField.attr("placeholder")!=""){
    
      inputField.val(inputField.attr("placeholder"));
      
      inputField.focus(function(){
        if(inputField.val()==inputField.attr("placeholder")){ inputField.val(""); }
      });
      
      inputField.blur(function(){
        if(inputField.val()==""){ inputField.val(inputField.attr("placeholder")); }
      });
      
      $(inputField).closest('form').submit(function(){
        var form = $(this);
        if(!form.hasClass('placeholderPending')){
          $('input',this).each(function(){
            var clearInput = $(this);
            if(clearInput.val()==clearInput.attr("placeholder")){ clearInput.val(""); }
          });
          form.addClass('placeholderPending');
        }
      });
    
    }
  });
}
});

There are still issues here – for instance if you try and submit something with the same value as the placeholder it will be removed. So make sure you use sensible placeholders, after all they should be there to demonstrate the format of an input.

As I said further up – feel free to point out any errors or issues or improvements – we’re all learning still!