Javascript 设置密码输入的默认值，以便可以读取
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4797166/
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
Set default value of a password input so it can be read
提问by theorise
I want to have a password field which says "Password" in it before a user enters their password (so they know what the field is)
我想要一个密码字段，在用户输入密码之前显示“密码”（这样他们就知道该字段是什么）
I'd rather just use Javascript, importing jQuery for this alone seems wasteful, but I have no idea how to. The images explain quite clearly:
我宁愿只使用 Javascript，仅为此导入 jQuery 似乎很浪费，但我不知道该怎么做。图片解释得很清楚：
What it looks like:
它的样子：
What I want it to look like:
我希望它看起来像什么：
It's only a very simple website and the most basic of logins (has no validation etc)
这只是一个非常简单的网站和最基本的登录（没有验证等）
Any ideas?
有任何想法吗？
<input id="username" name="username" class="input_text" type="text" value="Username" />
<input id="password" name="password" class="input_text" type="password" value="Password" />
回答by Diogo Cardoso
If you're using HTML5 then you should use the placeholder attribute.
如果您使用的是 HTML5，那么您应该使用placeholder 属性。
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
If you're using HTML4 you can create a fake password field.
如果您使用 HTML4，您可以创建一个假密码字段。
<script type="text/javascript">
function pwdFocus() {
$('#fakepassword').hide();
$('#password').show();
$('#password').focus();
}
function pwdBlur() {
if ($('#password').attr('value') == '') {
$('#password').hide();
$('#fakepassword').show();
}
}
</script>
<input id="username" name="username" class="input_text" type="text" v="Username" />
<input id="fakepassword" name="fakepassword" type="text" value="Password" style="color:#ccc" onfocus="pwdFocus()" />
<input id="password" name="password" class="input_text" type="password" style="display:none" onblur="pwdBlur()" />
回答by Pablo Santa Cruz
Change your passwordinput to be a simple input type text. Then, with JavaScript (or JQuery) on focus event, change it to be a input type password.
将您的password输入更改为简单的输入类型text。然后，在焦点事件上使用 JavaScript（或 JQuery），将其更改为输入类型password。
Here is a little untested sample with plain JavaScript (no JQUERY):
这是一个未经测试的纯 JavaScript 示例（无 JQUERY）：
<html>
<head>
<script type="text/javascript">
function makeItPassword()
{
document.getElementById("passcontainer")
.innerHTML = "<input id=\"password\" name=\"password\" type=\"password\"/>";
document.getElementById("password").focus();
}
</script>
</head>
<body>
<form>
<span id="passcontainer">
<input onfocus="return makeItPassword()" name="password" type="text" value="Type Password" />
</span>
</form>
</body>
</html>
回答by Ms2ger
A simple solution:
一个简单的解决方案：
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
回答by Levi Meredith
Add the following code to your javascript:
将以下代码添加到您的 javascript 中：
function makePasswordHidden() {
document.getElementById("password").setAttribute("type", "password");
}
Change the input for the password to:
将密码的输入更改为：
<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">
What this does it it makes the input element a 'password' and the value is updated so that it is hidden. If you would like for the value="Password" to be visible if the field is left empty then add the following javascript function:
它的作用是使输入元素成为“密码”，并且更新值以使其隐藏。如果您希望在字段为空时使 value="Password" 可见，请添加以下 javascript 函数：
function makePasswordShown() {
document.getElementById("password").setAttrivute("type", "text");
}
And add the following to your password input:
并将以下内容添加到您的密码输入中：
onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
回答by Leon5637
I had another idea to deal with this problem and you will need no Javascript:
我有另一个想法来处理这个问题，你将不需要 Javascript：
<input onclick="value=''; type='password';" name="password" type="text" value="Password" />
Or you can also do it like this:
或者你也可以这样做：
<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />
I do not know the difference between this possibilities.
Another thing you could change is to write instead of onclick=.......onfocus=.....
我不知道这些可能性之间的区别。你可以改变的另一件事是写而不是onclick=.......onfocus=.....
I don't know the difference here, too.
我也不知道这里的区别。
But I hope I could help you. PS: Sorry because of my bad English I'm German.
但我希望我能帮到你。PS：对不起，因为我的英语不好，我是德国人。
