清除默认值答案

【问题标题】：clear default value清除默认值
【发布时间】：2010-10-26 23:17:24
【问题描述】：

我找到了很多示例，但我试图找出在单击输入时清除输入默认值的最简单方法。

这是一个搜索框。我有“搜索帖子”，我想在点击它时清除它。

我尝试使用 jquery，但由于某种原因它不起作用。

$('#search').click(function() {           
 if($(this).val() == 'Search for post') 
 $(this).val('');
});

<input type="text" name="s" id="search" value="Search for post">

谁能想到更简单的代码？

【问题讨论】：

标签： javascript jquery forms input

【解决方案1】：

用 html5 placeholder 属性试试这个会很有趣。这适用于所有当前版本的 Safari、Chrome 和 Firefox。

<input type="text" name="s" id="search" placeholder="Search for post"/>

然后您需要为不支持此功能的浏览器添加一些后备代码。

$(function() {
    $(':input[placeholder]').each(function() {
        var me = $(this);
        me.val(me.attr('placeholder'))
            .focus(function() {
                var that = $(this);
                if (that.val() == that.attr('placeholder')) {
                    that.val('');
                }
            }).blur(function() {
                var that = $(this);
                if (that.val().trim().length == 0) {
                    that.val(that.attr('placeholder'));
                }
            });
    });
});

我拼凑了一个 jsfiddle 来测试它。对于那些支持它的人来说，它似乎工作得很好，而对于像 IE 6 这样的浏览器来说，它也一样好。

http://jsfiddle.net/V2R9J/（注意：我将trim 更改为空字符串比较只是为了让它工作。您可以/应该在此处使用自己的修剪功能。）

免责声明：这不适用于通过 ajax 插入的字段。您可以尝试使用 live 进行某些操作，也可以手动调用方法。此外 - 它适用于 password 字段，因为它只会让它们显示 * 或其他一些带项目符号的字段，但这已经是一个问题了。

这是相当实验性的，但它似乎是一个非常酷的解决方案，它允许使用较新浏览器的人获得 html5 中的一些很棒的功能，尽管它很简单。

【讨论】：

【解决方案2】：

对于输入，您想使用.focus()

现场演示：http://jsfiddle.net/rchern/aWdgZ/

【讨论】：

【解决方案3】：


$('#search').focus(function() {           
 $(this).val('');
 $(this).unbind('focus');
});

【讨论】：