仿淘寶頁面的搜索引擎，點擊輸入框文字不消失
阿新 • • 發佈：2017-07-02
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
仿淘寶頁面的搜索引擎，點擊輸入框文字不消失