Placeholder polyfill

by aljordan82

HTML

<input placeholder="test"/> 
<input placeholder="test" type="password"/>

JavaScript

//place holder fallback 
var testInput = document.createElement('input');
var placeholderSupport = ("placeholder" in testInput);

if(!placeholderSupport){
  $('input[placeholder]').each(function (index, current) {
    var $real = $(this);
    var placeHolderValue = $real.attr("placeholder");
    var classes = $real.attr("class");
    $fakeInput = $("<input>").attr({"type": "text"}).val(placeHolderValue).addClass('placeholder fake-input' , classes )

    $fakeInput.insertBefore($real);
    $real.hide();
    $fakeInput.focus(function() {
      $(this).blur().hide()
      .next().show().focus();
    });
    
    $real.blur(function () {
      if ($(this).val() == '') {
        $(this).hide()
        .prev().show();
      }
    });
  });
}