1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #txt { 8 position: relative; 9 10 } 11 #lbl { 12 position: absolute; 13 top: 8px; 14 left: 10px; 15 color: #ccc; 16 cursor: text; 17 } 18 </style> 19 <script> 20 window.onload = function () { 21 function $(id){ 22 return document.getElementById(id); 23 } 24 $("txt").oninput = function () { 25 if(this.value == ""){ 26 $("lbl").style.display="block"; 27 } 28 else{ 29 $("lbl").style.display="none"; 30 } 31 } 32 } 33 </script> 34 </head> 35 <body> 36 <div class="search"> 37 <input type="text" id="txt"/> 38 <label for="txt" id="lbl">必败的国际大牌</label> 39 </div> 40 </body> 41 </html>
注意：
上面的仿淘宝搜索引擎写了一大堆 ，其实可以化简为一个属性
placeholder=必败的国际大牌
但是不支持IE678