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

时间 2019-11-12

标签实现搜索点击提示文字消失离开出现繁體版

原文原文链接

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

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

<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="请输入商家名称地址" />

特别补充：html5也能够直接实现相似功能

具体请参考个人另外一篇博文《HTML5轻松实现搜索框提示文字点击消失—及placeholder颜色的设置》
http://blog.csdn.net/pspgbhu/article/details/51465514css

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

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

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

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

特别补充：html5也能够直接实现相似功能

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

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

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