HTML：密码字段问题中的HTML5占位符属性

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

简化：

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

在我的测试中（FF，Chrome），placeholer显示灰色文本。 我怎样才能在密码“点”的占位符文本？ 在IE中有占位符支持？

例如。 用户看到一个伪造的灰色密码，而不是文本1233467。

（我有jquery可用）

非常感谢你，

哈雷

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

---

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

placeholder="●●●●●"

在IE中的支持请参考其他线程，例如在IE中显示占位符文本的密码字段或占位符在IE / Firefox中使用此JavaScript的文本而不是密码框

---

要回答您更新的问题，

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

用span元素包裹你的表单。 然后，您可以在密码字段中添加标签作为占位符。 最后，为了在输入密码时删除标签，在密码字段的按键上绑定并从标签中删除文本。 以下是代码示例，您可能需要更改ID：

<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>

---

尽管我从UX角度反对这一点，但我会为此提供答案。

而不是使用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;
    });
  }
}

我想重申一下，我不推荐这种方法，但这会做你想要的。

编辑：

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

链接地址: http://www.djcxy.com/p/70551.html

上一篇: HTML: HTML5 Placeholder attribute in password field issue

下一篇: The best placeholder polyfil script for ie7, ie8 and ie9