<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form id="form1" action="">
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="password" name="password2" placeholder="请确认密码">
<input type="text" name="email" placeholder="请输入邮箱">
</form> <script type="text/javascript">
(function(){
//检测是否支持placeholder
if('placeholder' in document.createElement('input')) return; var form = document.getElementById('form1'),
inputs = form.getElementsByTagName('input'),
i,input,value,type; //获取焦点事件
var focus = function(value,type){
return function(){
if(this.value === value) this.value = '';
if(this.value === '' && type === 'password'){
try {
this.type = 'password';
}catch(e){
this.style.visibility = 'hidden';
this.style.position = 'absolute';
this.nextSibling.style.visibility = 'visible';
this.nextSibling.style.position = 'relative';
//定位光标
this.nextSibling.focus();
}
}
};
}; //失去焦点事件
var blur = function(value,type){
return function(){
if(this.value === '') this.value = value;
if(this.value === value && type === 'password'){
try{
this.type = 'text';
}catch(e){
this.style.visibility = 'hidden';
this.style.position = 'absolute';
this.previousSibling.style.visibility = 'visible';
this.previousSibling.style.position = 'relative';
}
}
};
}; //如果浏览器是ie8以下，则创建一个文本框与密码框切换显示
var createInput = function(value,type,type2){
var tmp = document.createElement('input');
tmp.type = type;
tmp.name = this.name;
tmp.placeholder = value;
tmp.value = value;
tmp.onfocus = focus(value,type2);
tmp.onblur = blur(value,type2);
form.insertBefore(tmp,this);
this.style.visibility = 'hidden';
this.style.position = 'absolute';
} for(i=0;i<inputs.length;i++){
input = inputs[i]; //不是文本框跳过
if(input.type !== 'text' && input.type !== 'password') continue; type = 'text';
value = input.getAttribute('placeholder'); if(input.type === 'password'){ type = 'password'; //给密码框做一个标记 //ie8以下input type是只读的
try {
input.type = 'text';
}catch(e){
createInput.call(input,value,'text',type);
i++;
}
} input.value = value;
input.onfocus = focus(value,type);
input.onblur = blur(value,type);
}
})();
</script>
</body>
</html>