HTML文本字段的行為類似於密碼字段

Question

我有一個注冊表，我想使用密碼字段。 問題是，我希望它在開頭有一個占位符說“密碼”，所以我使用的是文本字段。 當用戶開始輸入時，我需要將字符轉換為星號或黑色圓圈，如密碼字段。
我已經嘗試通過javascript將“type”屬性更改為“password”，所以我被卡住了。
有沒有一種簡單的方法來解決這個問題？ 或者有人知道一個好的javascript（最好是jquery）來破解這個嗎？
謝謝

Answer 1

1. 使用常規密碼字段
2. 不要將該value作為占位符濫用 - 它對屏幕閱讀器用戶等是不可見的。
3. 將標簽放在<label>
4. 將標簽放在輸入后面
5. 使用JS重新設置輸入以更改背景

演示http://dorward.me.uk/tmp/label-work/example.html

Answer 2

您可以使用HTML5 placeholder屬性但是，這不適用於所有瀏覽器（尤其是較舊的瀏覽器）。

<input type="password" name="pwd" placeholder="Enter Password" />

Answer 3

將div或span標記懸停在文本（密碼）字段上，然后在密碼字段獲得焦點或單擊div / span時隱藏它。

Answer 4

通常，瀏覽器不願意通過JavaScript更改input元素的type屬性。 大多數解決方法涉及使用新type克隆input ，並刪除原始輸入。

您可以將標簽放在輸入表單上，並在焦點上將其刪除。

您應該考慮不使用type="password"的含義 - 它是語義上正確的選項。

更新

在閱讀David Dorward的回答后 ，你應該強烈考慮他非常有效的觀點。

Answer 5

我有一個類似的問題，我將輸入的值作為我的標簽，當你點擊其中一個時，一些Javascript將運行，清除輸入。 但是在密碼字段中，您需要將輸入類型從“文本”更改為“密碼”，這適用於Safari或Firefox等瀏覽器，但不適用於IE（IE不支持setAttribute功能）。 所以我正在試圖弄清楚自己如何最好地做到這一點（IE條件等）

我找到了這個帖子，我認為昆汀最有想法。 不僅因為它的工作原理並且應該適用於所有瀏覽器，而且它還在代碼中提供了一個實際的標簽，除了Screenreaders之外，它也是一種很好的做法。 另外，您應該始終考慮在某種程度上使用屏幕閱讀器的人。

以下是解決方案的基礎知識：HTML：

<label>Enter Password
<input type="password" name="password" class="input" /></label>

jQuery（注意：我不是jQuery專家。這可能寫得更好或更有效，但是對於兩個字段，它可以工作）：

$("input[name=password]").focus(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

$("input[name=password]").blur(function() {
    var value = $("input[name=password]").val();
    if(value == "") {
        $(this).toggleClass("inputBg");
    }
});

CSS以Label標簽開頭，其樣式與輸入類相同，並添加了位置相對和顯示塊。 然后輸入有兩個類。 一個是正​​確的寬度，高度等定位絕對，具有比標簽更高的z指數，但沒有背景。 第二類完全相同，但與背景。

jQuery只是在兩個類之間切換，因此您將在輸入下看到標簽，但是當您單擊輸入時，會出現背景，您可以在其上鍵入文本。 效果很好，應該適用於所有瀏覽器（雖然只在Mac上的Safari和Windows上的IE / Firefox上測試過）。 好主意昆汀！