1. 程式人生 > >仿淘寶頁面的搜索引擎,點擊輸入框文字不消失

仿淘寶頁面的搜索引擎,點擊輸入框文字不消失

arch 大堆 urn images ace src func 國際 lan

 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

仿淘寶頁面的搜索引擎,點擊輸入框文字不消失