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

Posted 清风白水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿淘宝页面的搜索引擎，点击输入框文字不消失相关的知识，希望对你有一定的参考价值。

 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

 

以上是关于仿淘宝页面的搜索引擎，点击输入框文字不消失的主要内容，如果未能解决你的问题，请参考以下文章

仿淘宝搜索框(点击隐藏文字)

鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 （仿京东的输入框效果）

用jquery怎么实现点击密码输入框，上面的提示文字“请输入密码”消失，失去焦点时候提示文字又存在

仿淘宝搜索框

设计input搜索框提示文字点击消失的效果

仿京东搜索框实例