仿淘宝搜索框 -- 输入内容隐藏默认文本

来源：互联网发布：笨方法学python在线编辑：程序博客网时间：2024/06/07 01:19

在线演示

这里写图片描述

html：

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

css：

<style>    input, button {  /*去除默认样式*/        border: none;        padding: 0;        margin: 0;        outline-style: none; /*去除input蓝色外边框*/    }    input {        vertical-align: middle;/*兼容IE8居中显示*/        padding-top: 0;        padding-bottom: 0;        font-family: "SimSun", "宋体";    }    #search {        width: 538px;        height: 75px;        position: relative;        margin: 100px auto;    }    input {        width: 450px;        height: 32px;        border: 2px solid red;        padding-left: 4px;        line-height: 32px;        font-size: 16px;        color: #666;        float: left;        font-weight: 400;    }    label {        font-size: 16px;        color: #ccc;        line-height: 32px;        position: absolute;        left: 10px;        top: 3px;        cursor: text;    }    button {        width: 80px;        height: 36px;        background-color: red;        color: #fff;        float: left;        font-size: 16px;        cursor: pointer;    }</style>

js：

<script>    function $(id) {return document.getElementById(id);}    // 检测用户表单输入内容 oninput是大部分浏览器支持  onpropertychange支持IE6、7、8    $("txt").oninput = $("txt").onpropertychange = function() {        if (this.value == "") {            $("message").style.display = "block";        } else {            $("message").style.display = "none";        }    }</script>

0 0