zoukankan      html  css  js  c++  java
  • 仿淘宝搜索框(点击隐藏文字)

    html部分

    <body>
    <div class="search">
        <input type="text" id="txt"/>
        <label for="txt" id="message">必败的国际大牌</label>
    </div>
    </body>

    css部分

    <style>
            .search {
                300px;
                height: 30px;
                margin: 100px auto;
                position: relative;
            }
            .search input {
                200px;
                height:25px;
                
            }
            .search label {
                font-size: 12px;
                color:#ccc;
                position: absolute;
                top:8px;
                left:20px;
                cursor: text;
            }
        </style>

    js部分

    <script>
            window.onload = function(){
                function $(id){return document.getElementById(id);}
                //oninput 大部分浏览器支持  检测用户表单输入内容
                //onpropertychange  ie678  检测用户表单输入内容
                $("txt").oninput = $("txt").onpropertychange = function(){
                    if(this.value == " ")
                    {
                        $("message").style.display = "block";
                    }
                    else
                    {
                        $("message").style.display = "none";
    
                    }
                }
            }
        </script>
  • 相关阅读:
    Dangling Javadoc comment
    IntelliJ IDEA :Error(1, 1) java 非法字符 'ufeff'
    什么是webhook
    智能DNS
    filebeat 乱码
    windows,交换机syslog收集
    Rsyslog
    ntp
    centos7 -lvm卷组
    nginx安装
  • 原文地址:https://www.cnblogs.com/zhoujingguoguo/p/8612997.html
Copyright © 2011-2022 走看看