Skip to content

Instantly share code, notes, and snippets.

@DeronW
Last active August 29, 2015 14:08
Show Gist options
  • Save DeronW/6c77f24245eb0b021b2a to your computer and use it in GitHub Desktop.
Save DeronW/6c77f24245eb0b021b2a to your computer and use it in GitHub Desktop.
placeholder.js used jQuery support password type input
$(function () {
"use strict";
var placeholderColor = "#999999";
var addTextFieldPlaceholderSupport = function (elem, text) {
var e = $(elem);
if (!e.val())
e.val(text).data("textColor", e.css("color")).css("color", placeholderColor);
e.focus(function () {
if (e.val() == text)
e.val("").removeClass("placeholder").css("color", e.data("textColor"))
}).blur(function () {
if (!e.val())
e.val(text).addClass("placeholder").css("color", placeholderColor)
}).closest("form").submit(function () {
if (e.val() == e.prop("placeholder"))
e.val("")
});
};
var addPasswordFieldPlaceholderSupport = function (elem, text) {
var e = $(elem);
var cover = $(document.createElement("div"));
e.parent().css("position", "relative").append(cover.text(text));
cover.css({
"height": e.css("height"),
"line-height": e.css("height"),
"width": e.css("width"),
"position": "absolute",
"text-align": e.css("text-align"),
"padding-left": e.css("padding-left"),
"color": placeholderColor,
"top": e[0].offsetTop,
"left": e[0].offsetLeft
}).on("click", function () {
$(this).hide();
});
e.focus(function () {
cover.hide()
}).blur(function () {
if (!e.val())
cover.show()
});
};
if (!("placeholder" in document.createElement("input"))) {
$("input[placeholder], textarea[placeholder]").each(function () {
var text = this.getAttribute("placeholder");
if (!text) return;
if (this.type == "password") {
addPasswordFieldPlaceholderSupport(this, text)
} else {
addTextFieldPlaceholderSupport(this, text)
}
})
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment