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

Posted windalm

tags:

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

html部分

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

css部分

<style>
        .search {
            width:300px;
            height: 30px;
            margin: 100px auto;
            position: relative;
        }
        .search input {
            width: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>

 

以上是关于仿淘宝搜索框(点击隐藏文字)的主要内容，如果未能解决你的问题，请参考以下文章

Javascript：仿淘宝搜索框用户输入事件的实现

仿淘宝搜索框

仿京东搜索框实例

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

uniapp淘宝添加地址

jQ禁止右键点击隐藏搜索文本框文字在新窗口中打开链接检测浏览器预加载图片页面样式切换所有列等高动态控制页面字体大小获得鼠标指针的X值Y值验证元素是否为空替换元素延迟加载验证元素