网页小技巧: 鼠标点击后搜索INPUT里显示字段隐藏

在Web2.0之后，网页越来越讲究细节，于是在很多细小的方面，不仅仅是文字的大小、颜色，而在于鼠标互动、对接的响应和弹出细节，在这里CMSYOU与大家分享鼠标点击后搜索INPUT里显示字段隐藏的方法。

具体效果：www.cmsyou.com底部的搜索框，鼠标点击，会隐藏文字，离开，会再次显示出来提示，抓图如下，大家可以试下。

具体方法：

一般的搜索代码为：

<form action="http://www.cmsyou.com/index.php" id="searchform" method="get" target="_blank">
<input type="hidden" name="m" value="search"/>
<input type="hidden" name="c" value="index"/>
<input type="hidden" name="a" value="init"/>
<input type="hidden" name="typeid" value="3" id="typeid"/>
<input type="hidden" name="siteid" value="1" id="siteid"/>
<input class="searchInput" type="text" value="搜索主题,帮助教程" name="q" id="q" />
<input type="submit" class="searchBtn" value="搜 索" title="搜索" />
</form>

搜索的关键词填入段是：

<input class="searchInput" type="text" value="搜索主题,帮助教程" name="q" id="q" />

那么，只要在这里边添加一个onfocus小代码就好，这样可以点击隐藏鼠标显示搜索提示字段，鼠标点击后，字段隐藏。

具体代码：

<input class="searchInput" type="text" value="探寻预留字" name="q" id="q" style="color:#ddd" onfocus="if (this.value=='搜索主题,帮助教程 ')this.value=''" onblur="if (this.value=='')this.value='搜索主题,帮助教程 '"/>

同样的道理，我们可以把onfocus应用到留言框里边，那么代码如下：

<textarea id="content" name="content" tabindex="1" class="on" style="color: rgb(102, 102, 102); " onfocus="if (this.value=='说点什么吧...')this.value=''" onblur="if (this.value=='')this.value='说点什么吧...'">说点什么吧...</textarea>

另外，也可以用加载JS的方式做到，欢迎测试，一起探讨，Enjoy it!