<!doctype html> <html> <head> <meta charset="gb2312" /> <title></title> <meta name="description" content=" "> <meta name="keywords" content=" "> </head> <body> <!--header--> <style> .line{height:20px;position:relative;margin-bottom:10px;margin-left:10px;} .line input{height:20px;140px;color:#ccc;} .line label{position:absolute;left:13px;top:5px;font-size:13px;color:#ccc;} </style> <div class="line"><input type="text" name="" id="txt" value="" placeholder="请输入用户名 "/></div> <div class="line"><input type="password" name="" id="ps" value="" placeholder="请输入密码 "/></div> <script> function placeholder (el) { if (el.placeholder && 'placeholder' in document.createElement(el.tagName)) return el; var txt = el.getAttribute('placeholder'), add_event = /*@cc_on'attachEvent'||@*/'addEventListener'; if (el.type==='password') { var label=document.createElement('label'); label.htmlFor=el.id; label.innerHTML=txt; el.parentNode.appendChild(label); var defaultDisplay=label.style.display; if (el.value !== '') {label.style.display='none'} el[add_event](/*@cc_on'on'+@*/'focus', function(){ if (label.style.display ===defaultDisplay) { label.style.display='none'; } }, false); el[add_event](/*@cc_on'on'+@*/'blur', function(){ if (label.style.display !==defaultDisplay && el.value === '' ) { label.style.display=defaultDisplay; } }, false); }else{ if (el.value === '' || el.value == txt) { el.value = txt; } el[add_event](/*@cc_on'on'+@*/'focus', function(){ if (el.value === txt) { el.value = ''; } }, false); el[add_event](/*@cc_on'on'+@*/'blur', function(){ if (el.value === '') { el.value = txt; } }, false); } return el; } placeholder(document.getElementById('txt')) placeholder(document.getElementById('ps')) </script> <!--/header--> </body> </html>
运行代码