密码字段的水印文本

本文关键字：文本 字段 密码 | 更新日期: 2023-09-27 18:01:47

我在页面上有一个密码字段。我想显示水印文本"输入密码"在屏幕上的密码字段输入密码之前，它显示文本作为密码类型。我们如何通过使用javascript来解决这个问题?

密码字段的水印文本

最简单的方法是使用允许密码字段水印的jQuery插件。我想到了这个插件做一个快速的谷歌搜索。

如果你不想使用jQuery插件，你需要的是2个html输入，一个可见，一个隐藏。隐藏的包含你想要传递回服务器的实际值，而可见的是你用javascript操作和用户交互的值。下一部分是同时处理两个输入。以下是我能想到的需要编码的重要部分:

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

尝试插件或自己编码javascript，让我知道它是如何进行的。

下面的代码是一个普通输入字段的简单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 */

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

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

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

input.placeholder =​​​​​​​ "Insert Password";

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

您一定要尝试jQuery的水印函数，例如http://code.google.com/p/jwatermark/

这个jQuery插件是积极维护和处理新的HTML5输入字段:http://code.google.com/p/jquery-watermark/

相关文章：