Question

我有一个注册表，我想使用密码字段。问题是，我希望它在开头有一个占位符说“密码”，所以我使用的是文本字段。当用户开始输入时，我需要将字符转换为星号或黑色圆圈，如密码字段我已经尝试通过javascript将“type”属性更改为“password”，所以我被卡住了有没有一种简单的方法来解决这个问题？或者有人知道一个好的javascript（最好是jquery）来破解这个吗？感谢

Answer 1

使用常规密码字段
请勿滥用value作为占位符 - 除其他外，屏幕阅读器用户也无法看到。
将标签放在<label>
将标签置于输入
使用JS重新设置输入以更改背景

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

Answer 2

您可以使用HTML5 placeholder attribute但是，这不适用于所有浏览器（尤其是较旧的浏览器）。

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

Answer 3

将div或span标记悬停在文字（密码）字段上，然后在密码字段获得焦点或点击div / span时隐藏它。

Answer 4

通常，浏览器不愿意通过JavaScript更改type元素的input属性。大多数解决方法都涉及使用新的input克隆type，并删除原始文件。

您可以将标签放在输入表单上，并在焦点上将其删除。

您应该考虑不使用type="password"的含义 - 它是语义上正确的选项。

更新

阅读David Dorward's answer后，你应该强烈考虑他的非常有效的观点。

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

HTML文本字段的行为类似于密码字段

5 个答案:

更新