var _debug = true; var _placeholderSupport = function() { var t = document.createElement("input"); t.type = "text"; return (typeof t.placeholder !== "undefined"); }(); function addIEPlaceholders() { var arrInputs = document.getElementsByTagName("input"); var arrTextareas = document.getElementsByTagName("textarea"); var combinedArray = []; for (var i = 0; i < arrInputs.length; i++) combinedArray.push(arrInputs[i]); for (var i = 0; i < arrTextareas.length; i++) combinedArray.push(arrTextareas[i]); for (var i = 0; i < combinedArray.length; i++) { var curInput = combinedArray[i]; if (!curInput.type || curInput.type == "" || curInput.type == "text" || curInput.type == "textarea") HandlePlaceholder(curInput); else if (curInput.type == "password") ReplaceWithText(curInput); } if (!_placeholderSupport) { for (var i = 0; i < document.forms.length; i++) { var oForm = document.forms[i]; if (oForm.attachEvent) { oForm.attachEvent("onsubmit", function() { PlaceholderFormSubmit(oForm); }); } else if (oForm.addEventListener) oForm.addEventListener("submit", function() { PlaceholderFormSubmit(oForm); }, false); } } }; function PlaceholderFormSubmit(oForm) { for (var i = 0; i < oForm.elements.length; i++) { var curElement = oForm.elements[i]; HandlePlaceholderItemSubmit(curElement); } } function HandlePlaceholderItemSubmit(element) { if (element.name) { var curPlaceholder = element.getAttribute("placeholder"); if (curPlaceholder && curPlaceholder.length > 0 && element.value === curPlaceholder) { element.value = ""; window.setTimeout(function() { element.value = curPlaceholder; }, 100); } } } function ReplaceWithText(oPasswordTextbox) { if (_placeholderSupport) return; var oTextbox = document.createElement("input"); oTextbox.type = "text"; oTextbox.id = oPasswordTextbox.id; oTextbox.name = oPasswordTextbox.name; //oTextbox.style = oPasswordTextbox.style; oTextbox.className = oPasswordTextbox.className; for (var i = 0; i < oPasswordTextbox.attributes.length; i++) { var curName = oPasswordTextbox.attributes.item(i).nodeName; var curValue = oPasswordTextbox.attributes.item(i).nodeValue; if (curName !== "type" && curName !== "name") { oTextbox.setAttribute(curName, curValue); } } oTextbox.originalTextbox = oPasswordTextbox; oPasswordTextbox.parentNode.replaceChild(oTextbox, oPasswordTextbox); HandlePlaceholder(oTextbox); if (!_placeholderSupport) { oPasswordTextbox.onblur = function() { if (this.dummyTextbox && this.value.length === 0) { this.parentNode.replaceChild(this.dummyTextbox, this); } }; } } function HandlePlaceholder(oTextbox) { if (!_placeholderSupport) { var curPlaceholder = oTextbox.getAttribute("placeholder"); if (curPlaceholder && curPlaceholder.length > 0) { Debug("Placeholder found for input box '" + oTextbox.name + "': " + curPlaceholder); Debug("Value found for input box '" + oTextbox.value + "': " + curPlaceholder); if(document.activeElement && oTextbox.name == document.activeElement.name){ Debug("Active Element and text field name are same '" + document.activeElement.name + "'and " + oTextbox.name); }else{ if(oTextbox.value == ""){ oTextbox.value = curPlaceholder; oTextbox.setAttribute("old_color", oTextbox.style.color); oTextbox.style.color = "#c0c0c0"; } oTextbox.onfocus = function() { Debug(" coming insideFocus this type'"); var _this = this; if (this.originalTextbox) { Debug("inside Original textbox in if condition '" + this.originalTextbox); _this = this.originalTextbox; _this.dummyTextbox = this; this.parentNode.replaceChild(this.originalTextbox, this); _this.focus(); } Debug("input box '" + _this.name + "' focus"); Debug("input box '" + _this.value + "' Value"); _this.style.color = _this.getAttribute("old_color"); if (_this.value === curPlaceholder) _this.value = ""; }; oTextbox.onblur = function() { var _this = this; Debug("input box '" + _this.name + "' blur"); Debug("input box value in blur is '" + oTextbox.value + "' blur"); if (_this.value === "" && oTextbox.value == "") { _this.style.color = "#c0c0c0"; _this.value = curPlaceholder; _this.style.border = "1px solid #cccccc"; } }; } } else { Debug("input box '" + oTextbox.name + "' does not have placeholder attribute"); Debug("input box '" + oTextbox.value + "' does not have placeholder attribute and actual placeholder is" + oTextbox.getAttribute("placeholder") ); if(oTextbox.value == curPlaceholder) { oTextbox.value =""; } } } else { Debug("browser has native support for placeholder"); } } function Debug(msg) { if (typeof _debug !== "undefined" && _debug) { console.log(msg); } }