html5文本域提示信息,JavaScript-js 实现输入框提示信息,模拟html5的placeholder属性

给个兼容不同浏览器模拟html5的placeholder属性，原理就是检查是否存在placeholder属性，不存在则模拟该属性，希望对有同样需求的人有用：

var funPlaceholder = function(element) {

//检测是否需要模拟placeholder

var placeholder = '';

if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {

//当前文本控件是否有id, 没有则创建

var idLabel = element.id ;

if (!idLabel) {

idLabel = "placeholder_" + new Date().getTime();

element.id = idLabel;

}

//创建label元素

var eleLabel = document.createElement("label");

eleLabel.htmlFor = idLabel;

eleLabel.style.position = "absolute";

//根据文本框实际尺寸修改这里的margin值

eleLabel.style.margin = "2px 0 0 3px";

eleLabel.style.color = "graytext";

eleLabel.style.cursor = "text";

//插入创建的label元素节点

element.parentNode.insertBefore(eleLabel, element);

//事件

element.onfocus = function() {

eleLabel.innerHTML = "";

};

element.onblur = function() {

if (this.value === "") {

eleLabel.innerHTML = placeholder;

}

//checkValue(this);

};

//样式初始化

if (element.value === "") {

eleLabel.innerHTML = placeholder;

}

}

};

funPlaceholder(document.getElementById("username"));

funPlaceholder(document.getElementById("password"));

funPlaceholder(document.getElementById("repassword"));