WordPress 搜索框添加文字提示 (续)

搜索框文字提示并不难实现, 但是对用户来说肯定是个不错的提示. 之前我写了一个文章, 介绍使用 jQuery 实现 WordPress 搜索框添加文字提示, 没想到大家会对此感兴趣, 但是一些朋友对使用大量 JavaScript 实现该功能感到不解. 所以本文作为上一篇的延续, 以说清楚我为何要如此实现, 并详细的描述我的设计思路以及实现方法.

本文可能用到的一些术语, 这里简单说明一下, 以免混淆.
搜索框: 指输入搜索关键字的文本域.
搜索栏: 指包括搜索框和其他元素的一个提供搜索功能的区域.
提交按钮: 这里指搜索搜索栏里的提示信息的文字串.

为什么要写一大片的 JavaScript, 而不用那个简单的方法?

先说说一般的做法吧, 上一篇文章的评论中有朋友提供了一段处理代码 (评论第一页), 整理如下:

1

<input type="text" name="s" value="提示文字" onfocus="if (value =='提示文字'){value =''}" onblur="if (value ==''){value='提示文字'}" />

这样是可以实现搜索框的文字提示, 也是最多人使用的方法, 但是由于下面的两个理由, 我放弃了这个看似简单方便, 却是相当粗糙的方法.

1. 以上做法有很大的缺陷.
如果用户的浏览器禁止了或者不支持 JavaScript, 那么页面初始化时依然在搜索框显示 "提示文字". 当鼠标聚焦到搜索框时, 文字并不会消除, 而是变成了默认的搜索内容, 此时用户或许会无奈地点 Backspace 消掉文字重新输入, 或许就不搜了, 找 Google 去.

为搜索框添加提示信息, 意在给予用户更多的引导, 以提高用户体验, 若为了实现功能而顾此失彼实在很不应该.

2. 在搜索页面的搜索框里显示本次搜索关键字.
在 Google 和百度搜索一些关键字之后, 跳转到搜索结果页面, 你会发现之前搜索的内容会保留在搜索框里. 对于用户来说, 这是很方便的. 为此, 我们可以用以下代码在 WordPress 中生成搜索输入框, 在搜索页面的搜索框显示本次搜索的关键字.

1

<input type="text" name="s" value="<?php echo wp_specialchars($s, 1); ?>" />

如果这里我们使用 JavaScript 添加搜索提示, 可以先判断搜索框里是否有内容, 如果没有内容才添加搜索提示. 示意代码如下:

1
2
3

if(searchtxt.value == "") {
	searchtxt.value = "提示文字";
}

如何使用 JavaScript 实现搜索栏文字提示?

上一篇文章中, 我给出了 jQuery 的实现代码, 但 jQuery 糟糕的代码结构很难将思路说清楚 (本人认为 jQuery 风格的代码容易编写但难以维护). 这不, 我又敲了一段 JavaScript...

1. 实现基本的搜索框文字提示功能.
从简单开始, 先做一个没有提交按钮的搜索栏吧.

1
2
3
4
5

<form action="<?php bloginfo('home'); ?>" method="get">
	<div>
		<input type="text" id="searchtxt" name="s" value="<?php echo wp_specialchars($s, 1); ?>" />
	</div>
</form>

请留意上方代码的 input 元素外层的 div 层, 没有它的话代码无法通过 W3C 认证.
接着, 我们要在页面初始化时和搜索框失去焦点时显示提示文字, 鼠标聚焦搜索框时消除文字提示.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// 搜索框
var searchtxt = document.getElementById("searchtxt");
// 提示文字
var tiptext = "提示文字...";
// 页面初始化时
if(searchtxt.value == "") {
	searchtxt.value = tiptext;
}
// 鼠标聚焦搜索框时
searchtxt.onfocus = function(e) {
	if(searchtxt.value == tiptext) {
		searchtxt.value = "";
	}
}
// 搜索框失去焦点时
searchtxt.onblur = function(e) {
	if(searchtxt.value == "") {
		searchtxt.value = tiptext;
	}
}

以上代码实现了最基本的功能, 你可以将这段代码放置在搜索栏代码下方, 因为这样可以在搜索栏加载完成的时候立即执行代码显示提示信息.

2. 让显示的提示文字不那么明显, 以区分开提示信息和搜索关键字.
让文字显示不那么明显很简单, 就是改改字体颜色嘛, 黑底的就将文字改暗一点, 白低的就改亮一些. 我们需要一小段 CSS, 你可以将它加到 style.css 中.

1
2
3

.searchtip {
	color:#999;
}

接着我们还要改一下 JavaScript, 当显示提示文字的时候, 让搜索框应用以上 CSS 代码, 否则取消这个样式.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 搜索框
var searchtxt = document.getElementById("searchtxt");
// 提示文字
var tiptext = "提示文字...";
// 页面初始化时
if(searchtxt.value == "" || searchtxt.value == tiptext) { // 初始化时, 就算显示内容就是提示文字也要进行处理, 以应用提示文字不一样的风格.
	searchtxt.className = "searchtip"; // 先改变风格
	searchtxt.value = tiptext; // 后改变内容
}
// 鼠标聚焦搜索框时
searchtxt.onfocus = function(e) {
	if(searchtxt.value == tiptext) {
		searchtxt.value = ""; // 先改变内容
		searchtxt.className = ""; // 后改变风格
	}
}
// 搜索框失去焦点时
searchtxt.onblur = function(e) {
	if(searchtxt.value == "") {
		searchtxt.className = "searchtip"; // 先改变风格
		searchtxt.value = tiptext; // 后改变内容
	}
}

从上方代码可以看出, 这里是通过修改 class 属性来控制颜色的, 但你也可以用其他方法, 如直接在 JavaScript 中修改样式 (不推荐). 但是你必须注意改变风格和更改搜索框内容的顺序. 至于为什么要如此关注处理顺序, 就当课后试题自己想想吧.

不知道你是否已经注意到, 页面初始化时的处理条件改变了, 为什么呢? 因为刷新页面的时候, 文本域和文本区都会保留刷新前的数据. 如果不这么处理, 在刷新页面后, 提示文字的样式风格就应用不了了.

3. 为搜索栏添加提交按钮
添加了新的元素, 就得修改一下页面代码了.

1
2
3
4
5
6

<form action="<?php bloginfo('home'); ?>" method="get">
	<div>
		<input type="text" id="searchtxt" name="s" value="<?php echo wp_specialchars($s, 1); ?>" />
		<input type="submit" id="searchbtn" value="" />
	</div>
</form>

考虑到提示文字也是搜索框的内容, 如果点了搜索按钮对它进行了搜索会相当的尴尬, 所以我们需要添加一小段 JavaScript 代码, 禁止在搜索框为空或显示提示信息的时候点击提交按钮进行搜索处理.

1
2
3
4
5
6
7
8

// 提交按钮
var searchbtn = document.getElementById("searchbtn");
// 禁止在搜索框为空或显示提示信息时提交表单
searchbtn.onclick = function(e) {
	if(searchtxt.value == "" || searchtxt.value == tiptext) {
		return false;
	}
}

总结

搜索框的文字提示是可有可无的功能, 它根本不能成为网站中十分有用的功能, 反而会增加网页的负担. 但为了提高用户体验, 或者在一定程度上吓唬菜鸟, 很有必要在搜索框加上这个小提示. 搜易我们必须要保证原来的功能不受影响的前提下进行处理, 不到万不得已时就别让页面依赖 JavaScript.

例如: 我想点击 TOP 按钮滑动到页面顶部, 我会写成:

1

<a href="#" onclick="goTop();return false;">TOP</a>

而不是

1

<a href="javascript:goTop();">TOP</a>

因为前者在浏览器不支持 JavaScript 的时候依然可以跳转到页面顶部, 只是不会滑动而已; 但后者会变得完全没有效果.

没想到写了这么长的一个文章, 我觉得问题应该说清楚了, 如果你还是一头雾水也不要担心, 请可以下载我最新发布的 Elegant Box 4.0 主题看看我在它上面是怎么实现的.