牧天的故事

我们经常会用到搜索，专业一些的搜索引擎有百度、Google、雅虎、新浪、搜狐等等。有些时候我们也会在非搜索引擎网站上进行搜索。在本文中，我们主要讨论非搜索引擎网站上的搜索界面。如何才能让搜索界面友好一些呢？个人见解如下。

这里的界面环境预设如下：

搜索工具条由一个搜索文本输入框和一个搜索按钮或者链接组成。网站访问者在文本输入框内输入搜索关键字后，点击搜索按钮或者链接即可进行搜索。如下图所示。

下面即开始我们的故事。

在一个暖暖的午后，春风开始轻柔吹拂地上的草木。阳光洒落在房间的地板上，牧天坐在窗后的电脑前，打开浏览器，开始了他的探索之旅。

正在一个网站畅游时，牧天想要搜索关于“雪之女王”的内容。于是他找到搜索区域，看到如下界面：在默认状态下，文本输入框中标有“请输入搜索关键字”的提示，这几个文字的颜色呈现为灰色，颜色值为“#dddddd”，效果如下图。

这让他仿佛感觉到，网站设计者轻轻地提示他：“Hi，牧天，这就是可以进行搜索的地方。”牧天很惬意。

由于一时轻松，牧天忘记在文本框中输入搜索关键字，就直接点击了搜索按钮。

让我们来猜一下，他这样可以得到搜索结果吗？也许你会猜肯定得不到，网站不会让他进行搜索的；也许你会猜，网页可能直接跳转到一个目录里面去，或者以“请输入搜索关键字”为内容进行搜索。这几种情况我在一些网站上面都见过。那现在让我们来看看牧天的情况。

牧天看见网页跳出一个警示框，告诉他“温馨提醒：先生，请输入搜索关键字。”。哦，原来在默认状态下，不输入任何内容是不能进行搜索操作的。在这种情况下，网站服务器减少了一次处理任务，而把判断交给了牧天的浏览器。网站的数据库也减少了一次查询操作。但牧天丝毫不会感觉到自己的浏览器会出现任何异常。

牧天接受了提示，关闭网页警示框，然后去点击文本输入框，要输入“雪之女王”。当他把光标定位在文本框里的一刹那，发现了有趣的事情。文本输入框中的灰色文字“请输入搜索关键字”不见了，只剩下光标在文本框里一闪一闪。

他又把光标定位在别的地方，竟然发现“请输入搜索关键字”这几个字又回来了，而且还保持原来的颜色。

他反复进行上面的两步操作，效果都是这样。原来是这样一回事。步骤A：当牧天把光标定位在输入框里时，网站判断牧天要输入新的内容，于是自动清除了“请输入搜索关键字”，让牧天可以直接输入，这让牧天感到很方便，不用再费力气去删除那几个字。步骤B：当牧天没有输入任何内容，又把光标定位在别的地方时，输入框中又会自动添加“请输入搜索关键字”，提示牧天还没有输入任何内容。这两步的判断可以反复进行。

现在，牧天已经轻轻敲下“雪之女王”几个字。他发现输入的文字，其颜色比“请输入搜索关键字”的颜色深了一些，颜色值为#666666。可是一不小心输成了“血之女网”。于是他把四个字全部删除，重新输入。调皮的牧天突然想到，如果我输入了内容，又全部删除掉，然后再把光标定位在别的地方，会发生什么事情呢？

他按照自己的想法去做了。结果看到文本输入框恢复到默认的样子。现在他明白了，只要文本输入框失去焦点，在输入框中没有任何内容的情况下，无论是因为没有输入，还是因为输入了又删除，文本框都会回到“请输入搜索关键字”的默认状态下。

牧天终于输入了“雪之女王”几个字，按下搜索按钮。网页自动转到搜索结果页面。在这个页面中，牧天看到文本输入框中显示灰色的“雪之女王”四个字。字输入框下方，列出了搜索结果，并且提示牧天共搜索到了48个相关结果。

牧天用鼠标单击文本输入框，“雪之女王”四字颜色加深，颜色值变为#666666。他又把鼠标点在其他地方，“雪之女王”四字颜色仍为#666666。而接下来对于文书输入框的实验，都和上面一样。

现在总结一下。对于一个简单的搜索界面，应做到以下几个方面：

1. 在默认状态下，文本输入框中标有“请输入搜索关键字”的提示，这几个文字的颜色呈现为灰色。

2. 在默认状态下，访问者不在文本输入框中输入任何内容，网页将使用友好的言语提示不能进行搜索操作。

3. 当访问者把光标定位在输入框里时，网站判断访问者是否要输入新的内容。如果是，则自动清除“请输入搜索关键字”，让其可以直接输入。

4. 当访问者没有输入任何内容，把光标定位在别的地方时，输入框中会自动添加“请输入搜索关键字”，提示访问还没有输入任何内容。

5. （3）和（4）的操作可以反复进行。

6. 只要文本输入框失去焦点，在输入框中没有任何内容的情况下，无论是因为没有输入，还是因为输入了又删除内容，文本框都会回到“请输入搜索关键字”的默认状态下。

7. 在搜索结果页面，文本输入框中显示灰色的搜索内容，并且提示访问者搜索的情况，如搜索到的结果的条数。

8. 在搜索结果页面，访问者单击文本输入框中的搜索内容，其文字颜色会自动加深，并且不会恢复到原来的灰色。

9. 在搜索结果页面，文本输入框要实现与搜索初始页相同的效果。

HTML演示地址 http://www.mutian.net/works/20090213_inputkey/