HTML代码:
<label for="email">邮箱:</label>
<input id="email" type="email" placeholder="zhangxinxu@zhangxinxu.com" size="26" />
JS代码:
var funPlaceholder = function(element) {
var placeholder = "";
if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
var idLabel = element.id ;
if (!idLabel) {
idLabel = "placeholder_" + new Date().getTime();
element.id = idLabel;
}
var eleLabel = document.createElement("label");
eleLabel.htmlFor = idLabel;
eleLabel.style.position = "absolute";
eleLabel.style.margin = "2px 0 0 3px";
eleLabel.style.color = "graytext";
eleLabel.style.cursor = "text";
element.parentNode.insertBefore(eleLabel, element);
var funOpacity = function(ele, opacity) {
if (ele.style.opacity) {
ele.style.opacity = opacity / 100;
} else {
ele.style.filter = "Alpha(opacity="+ opacity +")";
}
}, opacityLabel = function() {
if (element.value === "") {
funOpacity(eleLabel, 40);
eleLabel.innerHTML = placeholder;
} else {
eleLabel.innerHTML = "";
}
};
element.onkeyup = function() { opacityLabel(); };
element.onfocus = function() { opacityLabel(); };
element.onblur = function() {
if (this.value === "") {
funOpacity(eleLabel, 100);
eleLabel.innerHTML = placeholder;
}
};
if (element.value === "") { eleLabel.innerHTML = placeholder; }
}
};
funPlaceholder(document.getElementById("email"));