javascript - jQuery - 如何使输入值 ("email"、 "password")在失焦时重新出现？

Question

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

jQuery:

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

HTML:

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

谢谢。

Answer 1

更新:

我终于开始做一个 dead-simple plugin用于支持placeholder attribute在本身不执行此操作的浏览器上。已经计划很长时间了，我有一个需要它的项目，所以... place5(插件)自动检测 native 支持并在浏览器上保留一些东西(默认情况下)自己完成这项工作(尽管如果您确实想使用插件，则可以覆盖它)。

<小时/>

原始答案:

我可能会把它作为一个可以重用的插件，但基本上，因为您只处理输入元素，所以它可以非常简单:

$(".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;
            }
        });
});

使用 defaultValue input 元素的值，如果用户离开字段时该值为空，则设置 value；如果用户输入字段时该值是默认值，则清除该值。这假设您在标记中使用 value="placeholder to show"。

更彻底的解决方案将使用 new placeholder attribute并使用feature-detection查看它是否受支持(遗憾的是 IE 中不支持，甚至 Firefox 3.6 中也不支持，但我打赌 4.0 中也支持)。我一直想做点什么......