密碼字段的水印文本

Question

我在頁面上有一個密碼字段。 我想在輸入密碼之前在屏幕上的密碼字段中顯示水印文本“輸入密碼”，它將文本顯示為密碼類型。 我們如何通過使用 javascript 來解決這個問題？

Answer 1

最簡單的方法是使用允許對密碼字段進行水印的 jQuery 插件。 我想出了這個插件做一個快速的谷歌搜索。

如果您不想使用 jQuery 插件，您將需要 2 個 html 輸入，一個可見，一個隱藏。 隱藏的包含您要傳回服務器的實際值，而可見的包含您使用 javascript 操作並與用戶交互的值。 下一部分是一起操作 2 個輸入。 以下是我可以考慮編寫代碼的重要部分：

• 當您的可見密碼輸入為空時，將其類型更改為文本並顯示水印，但將隱藏輸入留空。
• 如果用戶給它焦點，隱藏水印並切換回密碼。
• 當他們鍵入時，將值復制到隱藏字段中。
• 如果他們離開輸入並且沒有文本，請將類型切換回文本並再次顯示水印。

嘗試使用插件或自己編寫 javascript，讓我知道它是怎么回事。

Answer 2

如果您只需要支持較新的瀏覽器，您可以在輸入中使用placeholder屬性。

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

或者，如果您需要在腳本中設置它，只需執行

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

請參閱http://jsfiddle.net/xECqY/ 。

Answer 3

所以下面的代碼是一個簡單的 jQuery 掩碼，用於常規輸入字段。 但這不適用於密碼字段，因為字母被屏蔽了。 所以這讓我想到了兩種可以擴展的方式。 一種是自己編寫一個屏蔽 function，所以使用常規輸入字段。 但在輸入時屏蔽字符。 另一種方法是在密碼字段上覆蓋一個常規文本框，然后在單擊時隱藏它或更改 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 4

此 jQuery 插件得到積極維護並處理新的 HTML5 輸入字段： http://code.google.com/p/jquery-watermark/

Answer 5

您絕對應該嘗試使用 jQuery 水印 function，例如。 http://code.google.com/p/jwatermark/