实现搜索框点击时提示文字消失离开时提示文字出现

最新推荐文章于 2024-04-12 13:32:18 发布

pspgbhu

最新推荐文章于 2024-04-12 13:32:18 发布

阅读量1w

点赞数 4

分类专栏： Web前端 CSS 文章标签： css 搜索框

本文链接：https://blog.csdn.net/pspgbhu/article/details/51286727

版权

Web前端同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

搜索框点击时提示文字消失离开时提示文字出现

该例为一个搜索框，点击搜索框后默认提示文字自动清除，离开再次显示默认提示文字

<html>
<body>
<meta charset="utf-8" />
<title>CSS搜索框</title>
<style type="text/css">
    .searchinput{
    border-right-width: 0px;
    padding-left: 3px;
    width: 168px;
    font-family: arial;
    float: left;
    border-top-width: 0px;
    border-bottom-width: 0px;
    color: #636365;
    margin-left: 4px;
    font-size: 8pt;
    vertical-align: middle;
    border-left-width: 0px;
    margin-right: 3px;
    }
    .tab_search{
    border-bottom: #cccccc 1px solid;
    border-left: #cccccc 1px solid;
    height: 25px;
    border-top: #cccccc 1px solid;
    border-right: #cccccc 1px solid;
    }
    .searchaction{
    width: 28px;
    float: left;
    height: 21px;
    font-size: 14px;
    padding: 1px 1px 1px 1px ;
    }
</style>
<form action="#" name="search">
    <table border="0" cellpadding="0" cellspacing="0" class="tab_search">
        <tr>
        <td>
            <input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="请输入商家名称地址" onkeydown="if (event.keyCode==13) {}" onblur="if(this.value=='')value='请输入商家名称地址';" onfocus="if(this.value=='请输入商家名称地址')value='';" value="请输入商家名称地址" />
        </td>
        <td>
        <input type="submit" value="ok" width="21" height="17" class="searchaction" />
        </td>
        </tr>
    </table>
</form> 

</body>
</html>

实现点击清除离开回来效果重点在于：

<input type="text" name="q" title="Search" class="searchinput" id="searchinput" value="请输入商家名称地址" onkeydown="if (event.keyCode==20) {}"  onblur="if(this.value=='')value='请输入商家名称地址';" onfocus="if(this.value=='请输入商家名称地址')value='';" value="请输入商家名称地址" />