<!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>