zoukankan      html  css  js  c++  java
  • 仿淘宝页面的搜索引擎,点击输入框文字不消失

     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

  • 相关阅读:
    BZOJ 2002 [Hnoi2010]Bounce 弹飞绵羊 ——Link-Cut Tree
    BZOJ 2049 [Sdoi2008]Cave 洞穴勘测 ——Link-Cut Tree
    hdu
    hdu
    hdu
    hdu
    hdu
    hdu
    hdu
    hdu
  • 原文地址:https://www.cnblogs.com/luxiaoyao/p/7107115.html
Copyright © 2011-2022 走看看