Javascript HTML：密码字段中的 HTML5 占位符属性问题 - 显示普通文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11523888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: HTML5 Placeholder attribute in password field issue- shows normal text?
提问by harley_woop
I am making a Login form, in which there are two fields-
我正在制作一个登录表单，其中有两个字段-
simplified:
简化：
<input type="text">
<input type="password" placeholder="1234567" >
In my tests (FF, Chrome) the placeholer shows grey text.
How can I have the placeholder text in password 'dots' ?And have placeholder support in IE?
在我的测试（FF、Chrome）中，占位符显示灰色文本。如何在密码“点”中添加占位符文本？并在 IE 中支持占位符？
eg. the user sees a fake grey password, not the text 1233467.
例如。用户看到的是假的灰色密码，而不是文本 1233467。
(I have jquery available)
（我有 jquery 可用）
Thankyou very much,
非常感谢，
Harley
哈雷
EDIT: Looks like this is the wrong way to use placeholder. However, how can I get IE support? Thanks
编辑：看起来这是使用占位符的错误方法。但是，如何获得 IE 支持？谢谢
回答by Matt_Bro
Try using the password dot code in the placeholder like so:
尝试在占位符中使用密码点代码，如下所示：
placeholder="●●●●●"
For support in IE please refer to other threads such as Showing Placeholder text for password field in IEor placeholder works for text but not password box in IE/Firefox using this javascript
如需在 IE 中的支持，请参阅其他线程，例如在 IE 中 显示密码字段的占位符文本或使用此 javascript 的占位符适用于文本，但不适用于 IE/Firefox 中的密码框
回答by Matt_Bro
To answer your updated question,
要回答您更新的问题，
I am building off of the answer given in thisthread.
我正在建立这个线程中给出的答案。
Wrap your form in a span element. Then you can add a label as a placeholder on the password field. Finally, in order to remove the label when a password is typed, bind on keypress of the password field and remove the text from the label. Here is an example of the code, you will probably want to change the ids:
将您的表单包装在 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>
回答by Nick Beranek
Even though I'm against this from a UX standpoint, I will provide an answer for this.
尽管我从 UX 的角度反对这一点，但我会为此提供一个答案。
Instead of using the HTML5 attribute placeholder, use valueinstead.
不要使用 HTML5 属性placeholder，value而是使用。
<input type="password" value="1234567">
Then on focus, replace the valuewith an empty string.
然后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;
});
}
}
I want to reiterate that I do NOT recommend this approach, but this will do what you're looking for.
我想重申一下，我不推荐这种方法，但这会满足您的要求。
EDIT:
编辑：
Please visit this page which will mimic placeholderfunctionality if it's not supported by your browser using jQuery: http://www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/
placeholder如果您的浏览器不支持使用 jQuery 的功能，请访问此页面，该页面将模拟功能：http: //www.cssnewbie.com/cross-browser-support-for-html5-placeholder-text-in-forms/
回答by ErTR
Simply working as you stated:
只需按照您的说明工作：
<input placeholder="Password" type="password">
Solution was waiting 8 years at most :P
解决方案最多等待 8 年：P
