第一种方法：
基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能。
1 <div><input type="email" name="email" spellcheck="false" placeholder="邮 箱" autofocus tabindex="1" x-webkit-speech></div>
2 <div><input type="password" name="password" placeholder="密 码" tabindex="2"></div>
第二种方法：
用span模拟，定位span，借助JS键盘事件判断输入，确定span里的内容显示隐藏。 原文链接：点击查看
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(document).ready(function(){ 9 10 $("#focus .input_txt").each(function(){ 11 var thisVal=$(this).val(); 12 //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 13 if(thisVal!=""){ 14 $(this).siblings("span").hide(); 15 }else{ 16 $(this).siblings("span").show(); 17 } 18 //聚焦型输入框验证 19 $(this).focus(function(){ 20 $(this).siblings("span").hide(); 21 }).blur(function(){ 22 var val=$(this).val(); 23 if(val!=""){ 24 $(this).siblings("span").hide(); 25 }else{ 26 $(this).siblings("span").show(); 27 } 28 }); 29 }) 30 $("#keydown .input_txt").each(function(){ 31 var thisVal=$(this).val(); 32 //判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示 33 if(thisVal!=""){ 34 $(this).siblings("span").hide(); 35 }else{ 36 $(this).siblings("span").show(); 37 } 38 $(this).keyup(function(){ 39 var val=$(this).val(); 40 $(this).siblings("span").hide(); 41 }).blur(function(){ 42 var val=$(this).val(); 43 if(val!=""){ 44 $(this).siblings("span").hide(); 45 }else{ 46 $(this).siblings("span").show(); 47 } 48 }) 49 }) 50 }) 51 </script> 52 <style type="text/css"> 53 form{width:400px;margin:10px auto;border:solid 1px #E0DEDE;background:#FCF9EF;padding:30px;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;} 54 label{display:block;height:40px;position:relative;margin:20px 0;} 55 span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;} 56 .input_txt{width:398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;} 57 .input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;} 58 .border_radius{border-radius:5px;color:#B00000;} 59 h2{font-family:"微软雅黑";text-shadow:1px 1px 3px #fff;} 60 </style> 61 </head> 62 63 <body> 64 <form class="border_radius" id="focus"> 65 <h2>聚焦型提示语消失</h2> 66 <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 67 <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 68 </form> 69 <form class="border_radius" id="keydown"> 70 <h2>输入型提示语消失</h2> 71 <label><span>花瓣注册邮箱</span><input type="text" class="input_txt border_radius" /></label> 72 <label><span>密码</span><input type="text" class="input_txt border_radius" /></label> 73 </form> 74 75 </body> 76 </html>