仿淘宝页面的搜索引擎，点击输入框文字不消失 

 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

 

posted @ 2017-07-02 20:40  清风白水  阅读(516)  评论(0)  编辑  收藏  举报