Question

我发现了很多例子，但我想找出一种在点击时清除输入默认值的最简单方法。

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

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

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

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

有人能想到更简单的代码吗？

Answer 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插入的字段。您可以尝试使用实时内容，也可以手动调用方法。此外 - 它与password字段一起工作，因为它只会让它们显示*或其他一些项目符号字段，但这已经是一个问题了。

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

Answer 2

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

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

Answer 3


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

清除默认值

3 个答案: