jQuery-如何使输入值(“电子邮件”、“密码”）在失焦时重新出现

jQuery - How to make the input values ("email", "password") reappear when out of focus?

本文关键字：电子邮件 新出现 密码 何使 jQuery- 输入      更新时间：2023-09-26

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

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" />

谢谢。

更新：

我终于抽出时间做了一个非常简单的插件，用于在没有原生功能的浏览器上支持placeholder属性。我已经计划了很长一段时间，我有一个项目需要它，所以…place5（插件）自动检测本地支持，并在可以自己完成任务的浏览器上（默认情况下）不做任何事情（尽管如果你真的想使用插件，你可以覆盖它）。

原始答案：

我可能会把它作为一个可以重用的插件来做，但基本上，由于您只处理input元素，所以它可以非常简单：

$(".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元素的defaultValue来设置value，如果值为默认值，则在用户输入字段时清除该值。这假设您在标记中使用value="placeholder to show"。

一个更彻底的解决方案是使用新的placeholder属性，并使用功能检测来查看是否支持它（遗憾的是，它在IE中没有，甚至在Firefox 3.6中也没有，但我敢打赌4.0已经支持了）。我一直想做点什么。。。

您确实应该考虑做得更好，即使使用placeholder属性，但是。。。

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

jsFiddle。

将解决您遇到的问题。

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

这可能会有所改善，如果是的话，请告诉我。

解决任务中大部分问题的完整解决方案：

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

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

HTML

<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" />

JavaScript

(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();

这是的实例

这里是我的小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);
相关文章：