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上测试过）。 好主意昆汀！