当我点击它时，JQuery 清空一个文本字段答案

【问题标题】：JQuery Empty A Textfield When I click in it当我点击它时，JQuery 清空一个文本字段
【发布时间】：2010-11-18 08:34:07
【问题描述】：

如果我单击文本字段（html 表单）来写东西，如何清空它。

伪代码：

On click #searchform
Erase String in #searchform

【问题讨论】：

你为什么要这样做？如果您输入错误并且只想编辑怎么办？似乎您想要的是，如果文本字段包含原始文本（例如：输入搜索词），那么当您单击时应该将其删除。对吗？
@tbleckert 确实如此。我认为这是一个标准的可用性事情..所以我需要一个条件分支，这样用户就不会生气..
为什么不使用 HTML 5 占位符属性？！
@Pavel Nikolov 我不知道 W3C 有想过这个问题。
占位符属性是要走的路！这是和有关它的文章davidwalsh.name/html5-placeholder 和这里是演示 davidwalsh.name/dw-content/html5-placeholder.php 你可以看看我的答案，看看如何使占位符属性适用于旧版浏览器。

标签： javascript jquery textfield erase string

【解决方案1】：

$('#searchform').click(function() { $(this).val('') })

【讨论】：

【解决方案2】：

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') {   
        $(this).data('original', $(this).val()).val('');
    }
});

$('#searchform').blur(function() { 
    if ($(this).val() == '') {   
        $(this).val($(this).data('original'));
    }
});

编辑到目前为止，您应该使用 placeholder 属性，如果您愿意，可以使用上面的作为 polyfill 来缺少对占位符的支持。

if (!('placeholder' in document.createElement('input'))){
    $('input[placeholder]').each(function() {
        $(this).placeholder();
    });
}

并将原代码转成插件，方便使用（配合一些小模组）。

jQuery.fn.placeholder = function() {
    return this.each(function() {
        var value = $(this).attr('placeholder');
        jQuery(this).val(value).addClass('placeholder');
        jQuery(this).focus(function() {
            if (jQuery(this).val() == value) {
                jQuery(this).val('').removeClass('placeholder');
            }
        });

        jQuery(this).blur(function() {
            if (jQuery(this).val() == '') {
                jQuery(this).val(value).addClass('placeholder');
            }
        });
    });
};

【讨论】：

以这种方式添加验证更加困难。想象一下该字段是必需的。然后必填字段验证器必须排除初始值。还假设您想为占位符使用不同的字体（或至少不同的颜色） - 那么您将不得不切换类。我认为placeholder 属性是要走的路。
嗯，是的，但那是在 2010 年，当时占位符还不是超级知名并且在浏览器中实现得很好。当然，现在是另一个时间了。但我应该更新我的答案。

【解决方案3】：

我建议您使用 HTML5 占位符属性。例如：

<input type="text" placeholder="some default string if empty" />

这适用于大多数最新的浏览器，对于较旧的浏览器，有一个解决方法 jQuery 插件。这是placeholder plugin的链接。

然后你只需调用：

$('input[placeholder]').placeholder();

【讨论】：

占位符演示 davidwalsh.name/dw-content/html5-placeholder.php 在 FF 3.5 中不起作用 - 我不想为此使用额外的插件.. 我选择 tbleckert 的答案..
@Tomkay 现在占位符是推荐的做事方式。您可以使用 Modernizr 或仅使用简单的 javascript if 来检测浏览器是否支持它。我认为现在只有 IE
是的，我想 HTML5 现在已经足够流行了，可以胜任这项工作。我也在新项目中使用浏览器验证。

【解决方案4】：

如果您想从 “输入搜索词”等字段中清除默认值，我使用以下代码：

function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}

然后在我的输入字段中添加：

onfocus="clearText(this)"

原来是这样：

<input type="text" name="username" value="enter your name here"  onfocus="clearText(this)">

【讨论】：

脚本方面的东西相当新，所以任何关于我为什么不应该的指针都会受到很大的欢迎。只是分享我过去用来解决这个问题的解决方案。
感谢您对文斯的帮助。 :) 我确定这可以正常工作，但代码可以以某种方式压缩。
对不起。我不喜欢内联 js 或内联 css 的原因是我希望 HTML 尽可能干净。语义为王！