码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-02 21:17:50      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:oct   htm   技术分享   this   消失   属性   doctype   搜索引擎   ima   

 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

 

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

标签:oct   htm   技术分享   this   消失   属性   doctype   搜索引擎   ima   

原文地址:http://www.cnblogs.com/luxiaoyao/p/7107115.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!