密码字段的水印文本答案

【问题标题】：Watermark text for Password Field密码字段的水印文本
【发布时间】：2011-07-12 14:53:10
【问题描述】：

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

【问题讨论】：

当然，仅将随机答案标记为正确并不是正确的方法，但我猜要努力...

【解决方案1】：

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

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

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

尝试使用插件或自己编写 javascript 代码，然后告诉我进展如何。

【讨论】：

【解决方案2】：

所以下面的代码是一个用于常规输入字段的简单 jQuery 掩码。但这不适用于密码字段，因为字母被屏蔽了！所以这让我想到了两种可以扩展的方式。一种是自己编写屏蔽函数。因此，请使用常规输入字段，但在输入字符时屏蔽字符。另一种方法是在密码字段上覆盖一个常规文本框，然后在单击时隐藏它或更改 z 顺序。我知道您刚刚在 cmets 中说您没有使用 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 */

【讨论】：

感谢您的回复，但我需要 javascript 方法。
啊，便便。刚刚意识到密码字段将被屏蔽。这将适用于常规领域。虽然这是一个开始。现在让我考虑一下掩蔽场方面。
好的，用一些想法更新了我的答案，以使我当前的代码可以使用密码字段。我将留下我的答案，以防它帮助其他使用 jQuery 的人。干杯！

【解决方案3】：

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

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

或者如果你需要在脚本中设置它就这样做

input.placeholder = "Insert Password";

见http://jsfiddle.net/xECqY/。

【讨论】：

【解决方案4】：

您绝对应该尝试使用 jQuery 水印功能，例如。 http://code.google.com/p/jwatermark/

【讨论】：

【解决方案5】：

此 jQuery 插件得到积极维护并处理新的 HTML5 输入字段：http://code.google.com/p/jquery-watermark/

【讨论】：