HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本

HTML: HTML5 Placeholder attribute in password field issue- shows normal text?

本文关键字：显示 常文本 文本 问题 属性 字段 密码 占位符 HTML5 HTML      更新时间：2023-11-03

我正在制作一个登录表单，其中有两个字段-

简化：

<input type="text">
<input type="password" placeholder="1234567" >

在我的测试(FF，Chrome(中，占位器显示灰色文本。如何在密码"点"中拥有占位符文本？并且在IE中是否支持占位符？

例如，用户看到的是假的灰色密码，而不是文本1233467。

(我有可用的jquery(

非常感谢，

哈利

编辑：看起来这是使用占位符的错误方式。但是，如何获得 IE 支持？谢谢

尝试在占位符中使用密码点代码，如下所示：

placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"

有关IE中的支持，请参阅其他线程，例如使用此 javascript 在 IE 中显示密码字段的占位符文本或占位符适用于 IE/Firefox 中的文本但不适用于密码框

要回答您更新的问题，

我正在构建此线程中给出的答案。

将窗体包装在 span 元素中。然后，您可以在密码字段上添加标签作为占位符。最后，为了在键入密码时删除标签，请在按键时绑定密码字段并从标签中删除文本。下面是一个代码示例，您可能需要更改 ids：

<span style="position: relative;">
<input id="password" type="password" placeholder="Password" >
<label id="placeholder" style="font: 0.75em/normal sans-serif; left: 5px; top: 3px; width: 147px; height: 15px; color: rgb(186, 186, 186); position: absolute; overflow-x: hidden; font-size-adjust: none; font-stretch: normal;" for="password">Password</label>
</span>
<script type="text/javascript">
    $(document).ready(function(){
        $('#password').keypress(function(){
            $('#placeholder').html("");
        });
    });
</script>

尽管我从用户体验的角度来看反对这一点，但我会为此提供一个答案。

不要使用 HTML5 属性placeholder，而是使用 value。

<input type="password" value="1234567">

然后在 focus 上，将value替换为空字符串。

var inputs = document.getElementsByTagName('input'),
    i = 0;
for (i = inputs.length; i--;) {
  listenerForI(i);
}
function listenerForI(i) {
  var input = inputs[i],
      type = input.getAttribute('type'),
      val = input.value;
  if (type === 'password') {
    input.addEventListener('focus', function() {
      if (input.value === val) input.value = '';
    });
    input.addEventListener('blur', function() {
      if (input.value === '') input.value = val;
    });
  }
}

我想重申，我不推荐这种方法，但这将完成您正在寻找的。

编辑：

请访问此页面，如果您的浏览器不支持placeholder jQuery：http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/

您可以使用

••••••••模拟占位符密码，只需复制/粘贴即可。

<input placeholder='••••••••' type='password' required />
相关文章：