quick and dirty "put prompt over input" box

I'm sure there are libraries out there that do this more cleanly, but sometimes if I just want a quick prompt overlaying the input box, that disappears when they start typing:

CSS:
.promptwrapper{
    position:relative;
}
.overlayprompt{
    position:absolute;
    color:#cccccc;
    top:2px;
    left:4px;
}

JS:
function doOverlayPrompt(input,overlay){        

input.focus(function(){overlay.hide();})
        .blur(function(){
            alert(input.val());
                if(input.val() == "") overlay.show();
                 else overlay.hide();
                }).blur();
           
        overlay.click(function(){   
            input.focus();
        });
}

example HTML:
<span class="promptwrapper"><div class="overlayprompt editFIELD_prompt">FIELD</div><input class="editFIELD"></span>

example JS:
doOverlayPrompt($(".editFIELD"),$(".editFIELD"));


So looking back right now I see this is a bad idea for 3 or so reasons:

1. it's better for forms you expect to be blank, vs. stuff a user would come back and edit later, because they might not be able to tell what field is what.
2. damn it, I've written this before!
3. And worst of all html5 has a nice "placeholder" tribute for input tags now, which does almost exactly this. As long as you don't need to support IE earlier than version 10....

Sigh.