我应该为“占位符”使用哪个 jQuery 插件？答案

【问题标题】：Which jQuery plugin should I use for a "placeholder"?我应该为“占位符”使用哪个 jQuery 插件？
【发布时间】：2011-12-24 08:07:53
【问题描述】：

在网络上，大多数网站都有搜索框。其中一些搜索框有一个 search... 占位符文本，当光标设置在搜索框中时，此文本会出现。这是用 jQuery 完成的吗？如果是这样，我该如何使用它？

【问题讨论】：

标签： javascript jquery search placeholder

【解决方案1】：

HTML5 中有一个新的placeholder 属性，它可以原生地处理这个问题。如果你因为某种原因不能使用 HTML5，这里有一个 jquery 回退：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

【讨论】：

如何在旧浏览器中使用 HTML 5 的大部分标签？谢谢你的评论。
要使用 HTML5，您只需更改页面的文档类型。但是请注意，除非您使用 HTML5shiv 或衍生版本，否则这可能会导致旧版浏览器出错。如果您需要支持旧浏览器，我建议您使用我发布的链接中的 jquery 方法。

【解决方案2】：

这可能是称为占位符的 HTML5 功能。它不需要 JavaScript (see proof)。它是这样工作的：

<input type="text" placeholder="search" name="search" />

或者，您可以只使用列出的一些扩展名，例如。 here.

【讨论】：

【解决方案3】：

不需要插件来做到这一点。

必须绑定输入框的.focus()和.blur()状态

在 focus() 上清除文本框，在 blur() 上如果没有输入则返回默认值

查看此演示。

http://jsfiddle.net/QvPCX/

HTML

<input type="text" name="search" id="search" value="Search.." />

jQuery('input[name="search"]').focus(function() {
        if (jQuery(this).val() == "Search..") {
            jQuery(this).val('');
        }
    }).blur(function() {
        if (jQuery(this).val() == "") {
            jQuery(this).val('Search..');
        }
    });

【讨论】：