Javascript jQuery-如何使输入值（“email”和“password”）在不对焦时重新出现？

当我在输入字段中单击时，“Email”和“password”值消失，这正是我想要的。但是，如果用户没有输入他的电子邮件/通行证并单击其他地方，我希望“电子邮件”和“密码”再次出现

jQuery：

$('.login-user, .login-pass').focus(function() {
    $(this).val("");
  });

Html:

谢谢

 $('.login-user').blur(function() {
        if(this.value.length == 0)
          {
             this.value = "Username"
          }
      });

---

<>这可能是可以改进的，如果是这样的话，请告诉我。

你应该考虑这样做更好，即使使用<代码>占位符属性，但是…

$('.login-user, .login-pass').each(function() {

    var input = $(this);

    input.focus(function() {

        if ($.trim(input.val()) != this.defaultValue) {
            return;
        }

        input.val('');
    });

    input.blur(function() {

        if ($.trim(input.val()) != '') {
            return;
        }

        input.val(this.defaultValue);
    });

});

---

…将解决您遇到的问题。

解决任务中大多数问题的完整解决方案：

$('.login-user, .login-pass').focus(function() {
    var $this = $(this);
    if (!$this.data('defaultValue') || $this.data('defaultValue') == $this.val()) {
        if (!$this.data('defaultValue')) {
            $this.data('defaultValue', $this.val());
        }
        $(this).val('');
    }
}).blur(function(){
    var $this = $(this);
    if ($this.val().length === 0) {
        $this.val($this.data('defaultValue'));
    }
});

---

使用标题属性作为默认值，然后使用一个小插件，您可以实现您想要的

HTML

这是一个活生生的例子

这里是我的小defaultVal插件的解压缩版本（用于学习目的）；）

---

更新：

我终于开始着手做一项研究，为那些本机不支持的浏览器提供支持。我计划了很长时间，我有一个项目需要它，所以

place5

（插件）自动检测本机支持，并在浏览器上（默认情况下）保留可以自己完成任务的内容（尽管如果确实想使用插件，您可以覆盖这些内容）

---

原始答案：

我可能会把它作为一个可以重用的插件来做，但基本上，因为您只处理

输入

元素，所以它可以非常简单：

$(".login-user, .login-pass").each(function() {
    $(this)
        .focus(function() {
            if (this.value.length === this.defaultValue) {
                this.value = "";
            }
        })
        .blur(function() {
            if (this.value.length === 0) {
                this.value = this.defaultValue;
            }
        });
});

如果用户离开字段时该值为空，则使用

input

元素的设置

值

，如果该值是默认值，则在用户进入字段时清除该值。这假设您使用

value=“占位符”在标记中显示“

”

---

一个更彻底的解决方案是使用和来查看它是否受到支持（遗憾的是，IE中没有，甚至Firefox 3.6中也没有，但我打赌4.0中有）。我一直想做点什么…

反复调用

$（这）

是一种反模式。虽然只执行两次并不太糟糕，但请记住，每次调用

$（）

，都会有几个函数调用和内存分配。@TJ，这很好。想帮我正确重写吗？只需将

$（this）

缓存到一个变量中并重用它。我还强烈建议在

if

语句中使用大括号，但这是一种风格（如果不这样做，至少将正文放在同一行或缩进）。但实际上，这些只是

输入

元素，jQuery不需要设置它们的值，不像其他控件那样复杂。只要

this.value=…

就可以了。@TJ，我想这就是你的意思，我会开始做的。谢谢你的建议。离题，但如果每次我集中精力研究这个领域时我的用户名都消失了，那我会发疯的。如果我只是想纠正一个简单的打字错误呢？+1但是就像@Nick的回答一样，所有那些

$（这个）

重复。。。（您确实不需要jQuery来设置

输入

元素的值；只需使用

this.value

）谁需要换行符？换行符是为胆小鬼准备的。；-）看，T.J.我也加了换行符

<input type="text" name="user" value="Email" tabindex="1" class="login-user" title="Email" />
<input type="password" name="password" value="Password" tabindex="2" class="login-pass" title="Password" />

(function(a){a.fn.extend({defaultVal:function(){return this.each(function(){var c;var b=a(this);c=b.attr("title");if(b.val()==""){b.val(c)}b.attr("title","");b.focus(function(){var d=a(this);if(d.val()==c){d.val("")}}).blur(function(){var d=a(this);if(d.val()==""){d.val(c)}})})}})})(jQuery);

$('.login-user,.login-pass').defaultVal();

(function ($) {
  $.fn.extend({
    defaultVal: function () {
      return this.each(function () {
        var defaultValue;
        var $this = $(this);
        defaultValue = $this.attr("title");
        if ($this.val() == "") {
          $this.val(defaultValue);
        }
        $this.attr("title", "");
        $this.focus(function () {
          var $that = $(this);
          if ($that.val() == defaultValue) {
            $that.val("");
          }
        }).blur(function () {
          var $that = $(this);
          if ($that.val() == "") {
            $that.val(defaultValue);
          }
        });
      });
    }
  });
})(jQuery);

$(".login-user, .login-pass").each(function() {
    $(this)
        .focus(function() {
            if (this.value.length === this.defaultValue) {
                this.value = "";
            }
        })
        .blur(function() {
            if (this.value.length === 0) {
                this.value = this.defaultValue;
            }
        });
});