jQuery输入文本清除，返回默认无条目答案

【问题标题】：jQuery Input Text Clear, Return to Default no EntryjQuery输入文本清除，返回默认无条目
【发布时间】：2012-07-05 04:18:22
【问题描述】：

我目前正在使用内联 javascript 来清除输入文本在焦点上的默认值。如果用户没有输入任何内容，则默认值会在模糊后显示。代码如下：

onfocus="if(this.value==this.defaultValue) this.value='';" onblur="if(this.value=='') this.value=this.defaultValue;"

问题在于我必须将这个 sn-p 添加到整个站点的每个文本输入中。与此等效的 jQuery 会自动为每个文本输入 (:text) 执行此操作。

我编造了以下两个错误。 (1) 它清除文本字段可能具有的任何值。如果值是默认的 attr 值，我只希望它清除它。 (2) blur 函数不插入默认值。我很确定我错过了一些非常简单的东西。

$(':text').focus(function() {
            var value = $(this).val();
            var defval = $(this).attr('value');
            if(value == defval) {
                $(this).val('');
            }
        });
        $(':text').blur(function() {
            var value = $(this).val();
            var defval = $(this).attr('value');
            if(value == '') {
                $(this).val(defval);
            }
        });

提前致谢！

【问题讨论】：

不会 $(this).val() 和 $(this).attr('value') 给出相同的东西吗？
@richard。不，$(this).attr('value') 将提供value 属性内的内容，而$(this).val() 将提供实际值。示例：当您更改文本字段的值并查看源代码时，it 并没有改变。
艾曼是正确的。 @Andre，我正在避免使用插件并尝试自己编写代码以帮助我更好地了解该语言。这似乎是一件简单的事情，无需扩展插件即可完成。我可能错了。

标签： jquery forms textinput

【解决方案1】：

我建议使用 html5 占位符而不是 defaultValue，并让现代浏览器处理这个问题，只有在不支持占位符的情况下才回退到 JS。

不管怎样，这是一个使用 defaultValue 的简单实现：

$('input[type="text"]').on({
    focus: function(){
        var $this = $(this);
        if($this.val() === $this[0].defaultValue) $this.val('');
    },
    blur: function(){
        var $this = $(this);
        if($this.val() === '') $this.val($this[0].defaultValue);
    }
});

另外，我强烈推荐使用插件，因为它可以处理所有这些以及一些可能的极端情况......

看看：

http://unwrongest.com/projects/defaultvalue/

【讨论】：