Simple jQuery snippet to convert form labels into inline placeholders

label-to-placeholder.js

 $("form :input").each(function(index, elem) {
    var eId = $(elem).attr("id");
    var label = null;
    if (eId && (label = $(elem).parents("form").find("label[for="+eId+"]")).length == 1) {
        $(elem).attr("placeholder", $(label).html());
        $(label).remove();
    }
 });

Hi I want to implement this in an Internet Explorer 9 and below in a way that when the input box is on focus, the place holder text is still there until the user starts typing and the placeholder disappears. In IE9 the placeholder seems to disappear as soon as the input box is on focus and this is so annoying. hate you IE9 +

I like this, exactly what I need!

make my day tnx!

Thanks!!!!!!!

or do $(label).hide(); instead of $(label).remove(); that way it's still there for the screen readers.

Actually you probably want to check if the field is a select and adjust the replacement behavior appropriately (setting the "placeholder" attribute of a select input will not display that text):

$("form :input").each(function(index, elem) {
var eId = $(elem).attr("id");
var label = null;
if (eId && (label = $(elem).parents("form").find("label[for="+eId+"]")).length == 1) {
if($(elem).is("select")) $(elem).prepend("<option value disabled selected hidden>"+$(label).html()+"</option>");
else $(elem).attr("placeholder", $(label).html());
$(label).hide();
}
});