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

时间:2012-07-17 13:48:01

标签: javascript html5 passwords placeholder

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

简化为:

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

在我的测试(FF,Chrome)中,placeholer显示灰色文本。 如何在密码'dots'中添加占位符文本? IE中有占位符支持吗?

<击>例如。用户看到的是假灰色密码,而不是文本1233467。

(我有jquery可用)

非常感谢,

哈利

编辑:看起来这是使用占位符的错误方法。但是,我如何获得IE支持?感谢

3 个答案:

答案 0 :(得分:27)

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

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

对于IE中的支持,请参考其他线程,如 Showing Placeholder text for password field in IEplaceholder works for text but not password box in IE/Firefox using this javascript

答案 1 :(得分:2)

要回答您更新的问题,

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

将表单包裹在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>

答案 2 :(得分:1)

即使我从用户体验的角度来反对这一点,我也会为此提供答案。

而不是使用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/