Question

我在页面上有一个密码字段。我想在输入密码之前在屏幕上的密码字段中显示水印文本“输入密码”，它将文本显示为密码类型。我们如何使用javascript解决此问题？

Answer 1

最简单的方法是使用一个允许密码字段加水印的jQuery插件。我想出了this plugin进行快速谷歌搜索。

如果您不想使用jQuery插件，那么您需要的是2个html输入，一个是可见的，一个是隐藏的。隐藏的一个包含您希望传递回服务器的实际值，而可见的一个是您使用javascript操作并且用户与之交互的值。下一部分是将两个输入一起操作。以下是我可以想到的代码的重要部分：

当您的可见密码输入为空时，将其类型更改为文本并显示水印但将隐藏的输入留空。
如果用户将焦点设为焦点，请隐藏水印并切换回密码。
在键入时，将值复制到隐藏字段中。
如果他们离开输入并且没有文字，请将类型切换回文字并再次显示水印。

尝试插件或自己编写javascript，让我知道它是怎么回事。

Answer 2

因此下面的代码是常规输入字段的简单jQuery掩码。但这对密码字段不起作用，因为字母被掩盖了！这让我想到了可以扩展的两种方式。一个是自己编写一个掩蔽函数。因此，请使用常规输入字段，但在输入时屏蔽字符。另一种方法是在密码字段上覆盖常规文本框，然后在单击时隐藏它或更改z顺序。我知道你刚才在评论中说你没有使用jQuery，但是我要把它留给其他。抱歉，我没有您的用例代码！

/* Newsletter Sign Up Functions*/
    /* Toggle field descriptions as they are clicked in and out of */
    //set default input values because Firefox is stupid and doesn't reset them
    $("#newsletterform input[name=first]").val('First Name');
    $("#newsletterform input[name=last]").val('Last Name');
    $("#newsletterform input[name=email]").val('E-mail Address');

    //store default input values
    $("#newsletterForm input:text").each(function() {
        $.data(this, "initialval", $(this).val());
    });
    //clear values on focus
    $("#newsletterForm input:text").focus(function() {
        if ($.data(this, "initialval") == $(this).val()) { $(this).val(""); }
    });
    //restore value on lost focus
    $("#newsletterForm input:text").blur(function() {
        if ($(this).val() == "") { $(this).val($.data(this, "initialval")); }
    });
    /* End toggle field descriptions */

Answer 3

如果您只需要支持较新的浏览器，则可以在输入中使用placeholder属性。

<input type="password" placeholder="Insert Password" />

或者，如果您需要在脚本中设置它，只需执行

input.placeholder = "Insert Password";

请参阅http://jsfiddle.net/xECqY/。

Answer 4

你一定要试试jQuery水印功能，例如。 http://code.google.com/p/jwatermark/

Answer 5

这个jQuery插件被主动维护并处理新的HTML5输入字段：http://code.google.com/p/jquery-watermark/

密码字段的水印文本

5 个答案: