$(function () { // -- Constants -- var PLACE_HOLDER_COLOR = "rgb(169,169,169)"; // "darkGrey" does not work in IE6 var PLACE_HOLDER_DATA_NAME = "original-font-color"; // -- Util Methods -- var getContent = function (element) { return $(element).val(); } var setContent = function (element, content) { $(element).val(content); } var getPlaceholder = function (element) { return $(element).attr("placeholder"); } var isContentEmpty = function (element) { var content = getContent(element); return (content.length === 0) || content == getPlaceholder(element); } var setPlaceholderStyle = function (element) { $(element).data(PLACE_HOLDER_DATA_NAME, $(element).css("color")); $(element).css("color", PLACE_HOLDER_COLOR); } var clearPlaceholderStyle = function (element) { $(element).css("color", $(element).data(PLACE_HOLDER_DATA_NAME)); $(element).removeData(PLACE_HOLDER_DATA_NAME); } var showPlaceholder = function (element) { setContent(element, getPlaceholder(element)); setPlaceholderStyle(element); } var hidePlaceholder = function (element) { if ($(element).data(PLACE_HOLDER_DATA_NAME)) { setContent(element, ""); clearPlaceholderStyle(element); } } // -- Event Handlers -- var inputFocused = function () { if (isContentEmpty(this)) { hidePlaceholder(this); } } var inputBlurred = function () { if (isContentEmpty(this)) { showPlaceholder(this); } } var parentFormSubmitted = function () { if (isContentEmpty(this)) { hidePlaceholder(this); } } // -- Bind event to components -- $("textarea, input[type=‘text‘]").each(function (index, element) { if ($(element).attr("placeholder")) { $(element).focus(inputFocused); $(element).blur(inputBlurred); $(element).bind("parentformsubmitted", parentFormSubmitted); // triggers show place holder on page load $(element).trigger("blur"); // triggers form submitted event on parent form submit $(element).parents("form").submit(function () { $(element).trigger("parentformsubmitted"); }); } }); });
时间: 2024-10-15 00:34:16