这个方法相比于原来直接添加 “input” 元素的值为提示文字的办法，提升了可用性和可访问性，不过也存在两个缺点。一个是 mg12 自己也提到的不方便国际化的问题；另一个则是，如果用户要搜索的关键词和默认的文字提示相同时，则无法进行搜索。当然，你也可以认为第二个问题是我钻牛角尖，也许根本没有人会用默认的文字提示作为搜索关键词。其实我也认为不会出现这种情况，我只是想提出另一种思路来实现搜索框的文字提示，这个办法应该可以解决上面提到的两个问题。

下面是我修改我这个主题的搜索框提示的方法：

首先我需要对搜索框部分的主题文件做一点小小的修改

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<div><input type="text" value="<?php the_search_query(); ?>" name="s" id="s" title="<?php _e('Type text to search here...'); ?>" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

以上是我这个主题文件的 searchform.php 文件的内容，我做的修改只是给 “input” 元素添加了一个属性

title=”<?php _e(’Type text to search here…’); ?>”

这样就解决了提示文字的国际化问题，如果在语言文件里有定义就可以直接使用了。

然后就是 jQuery 的部分

jQuery(document).ready(function(){
    // DOM 加载完毕时添加搜索提示
    // 修改搜索框的背景色为透明，以便显示其下方的文字
    $("input#s").css({backgroundColor:"transparent"});

    $("input#s")
        // 将搜索框的上层元素改为相对定位
        .parent().css({position:"relative"})
        // 添加一个绝对定位的 span 至搜索框的下方来显示文字提示
        .append('<span id="searchtip" style="position:absolute; top:2px; left:10px; color:#999; display:none; z-index:-1;">' + $("input#s").attr("title") + '</span>');

    // 如果搜索框内容为空则显示提示
    if($("input#s").val() == "") {
        $("#searchtip").show();
    }

    // 当鼠标聚焦在搜索框
    $("input#s").focus(function(){
        // 如果搜索框内容为空则隐藏提示
        if($(this).val() == "") {
            $("#searchtip").hide();
        }
    }).blur(function(){
        // 如果搜索框内容为空则显示提示
        if($(this).val() == "") {
            $("#searchtip").show();
        }
    });

    // 当搜索表单提交时
    $("#searchform").submit(function(){
        // 如果搜索框内容为空则不提交
        if($("input#s").val() == "") {
            return false;
        }
        return true;
    });

    // 解决 IE 8 透明背景色的问题
    $("#searchtip").click(function(){$("input#s").trigger("focus");});
});

这个方法的原理也很简单，就是在搜索框的后面加入一个绝对定位的 “span” 元素来显示文字提示，文字提示的内容则是通过获取搜索框的 title 值来添加。

以上就完成了搜索框文字提示的添加，下面是我在这个过程中遇到的一个问题。

注意到上面的最后一行代码了吗，是为了解决在 IE 8 下的一个问题的，本来可以不需要这行代码的，就是为了万恶的 IE …

问题是这样的，当一个绝对定位的元素位于一个 “input” 元素的下方时，在 IE 8 下你依旧可以用鼠标访问到这个元素，导致点击搜索框时无法获得焦点，在其他我测试的浏览器中都没有这个问题。所以在 IE 8 下，需要为提示文字的 “span” 元素额外的绑定一个监听事件。而且有点奇怪的是，把 “input” 元素换成 “div” 元素后，IE 8 下的表现又和其他浏览器一致了。

关于这个问题我做了一个简单的演示 Demo 页面，有兴趣的可以去看看，我手头没有 IE 7 和 IE 6 ，不知道这两个浏览器是不是存在同样的问题，另外如果你有解决这个问题的办法，也请多多指教。

趁着读书时的热情，做了一些小的demo来练习，在上一个demo中发现opera浏览器在处理xhtml标签的”disabled”属性时有一个bug。

事情是这样的，我在页面中有一个button元素，我希望它只能被点击一次，所以我在button的click事件中将它的”disabled”属性置为true。这样，点击一次之后，这个button就变成了灰色的不可用状态，我也确实无法再通过鼠标直接点击它了。事情到此都是没有问题的，接下来我希望能用键盘快捷键来控制这个button，于是我给它添加了”accesskey”属性，然后问题就来了，在我点击一次使得button变为不可用状态后，我还是可以通过accesskey来点击它。
我在其他的浏览器上进行了同样的实验，结果表明在我现有的浏览器 (FireFox3, IE8, Safari3/win, Chrome0.4) 上都没有这个bug，除了opera。我目前使用的是opera 9.61版，不过我估计opera以前的版本也存在同样的bug。

进一步实验后，发现opera不只是在处理”accesskey”的点击时有bug，而是在处理除了鼠标直接点击之外的所有其他方式时都存在这个bug。比如在另一个JavaScript脚本里调用这个已经被禁用的button的click函数，甚至通过tab获取button焦点之后连续点击回车，都可以绕过button的disabled属性而触发它的click事件。

我写了一个demo页面来演示这个bug：Button & accesskey

还有要注意的一点就是accesskey在不同的浏览器中的使用方法并不一样。Opera中是通过shift+esc调出accesskey菜单再按相应的accesskey，IE8、Safari3/win以及Chrome0.4则都是使用alt+accesskey。FireFox3中则默认是alt+shift+accesskey，这避免了与浏览器菜单快捷键的冲突，不过可以通过修改about:config的ui.key.contentAccess键值来更改，这个键值的具体含义如下：

• 1 = Shift
• 2 = Ctrl
• 3 = Shift + Ctrl
• 4 = Alt
• 5 = Shift + Alt
• 6 = Alt + Ctrl
• 7 = Ctrl + Shift + Alt

另外，在做这个demo的时候还发现了IE在处理button按钮时和其他浏览器的不同。在JavaScript脚本中通过element.value来获取button的value属性的值，在IE中得到的是button的innerHTML值，而在其他浏览器中得到的是正确的value属性的值。在网上搜了一下，这个问题有不少人问，解决办法也有不少，有的人建议改用input标签，不过我觉得不符合语义化的要求。还有通过Javascript和xml来解决的，感觉太麻烦了。最后我决定使用button的title属性来存储我需要的值，没办法，妥协一下吧。

1、双空白边浮动 bug

测试结果：已修复

2、3像素文本偏移 bug

测试结果：已修复

3、IE 6 重复字符 bug

测试结果：未修复

4、IE 6 躲猫猫 bug

测试结果：已修复

5、相对容器中的绝对定位

测试结果：已修复

关于 IE 7 修复的其他 bug 列表可以看看这里。