Skip to main content

Cross-browser HTML5 input placeHolder support

/*!
* Input cross-browser PlaceHolder attribute support
* Jon LaBelle, 2012
*/
var isPlaceHolderSupported = function () {
  var inputEl = document.createElement('input');
  return 'placeholder' in inputEl;
};

$(document).ready(function () {
  if (!isPlaceHolderSupported()) {
    $("input").each(function () {
      var focusColor = "#555555";
      var blurColor = "#999999";

      if ($(this).val() === "" && $(this).attr("placeholder") !== "") {
        $(this).val($(this).attr("placeholder")).css("color", blurColor);

        $(this).focus(function () {
          if ($(this).val() === $(this).attr("placeholder")) {
            $(this).val("").css("color", focusColor);
          }
        });

        $(this).blur(function () {
          if ($(this).val() === "") {
            $(this).val($(this).attr("placeholder")).css("color", blurColor);
          }
        });
      }
    });
  }
});