设置默认值
我想拥有它说“密码”中有一个用户之前输入密码字段中输入自己的密码(让他们知道现场是什么)设置默认值
我d而只是使用Javascript,单独导入jQuery看起来很浪费,但我不知道如何去做。这些图像解释很清楚:
它看起来像什么:
我希望它看起来像:
这只是一个很简单的网站和最基本的登录(没有验证等)
任何想法?
<input id="username" name="username" class="input_text" type="text" value="Username" />
<input id="password" name="password" class="input_text" type="password" value="Password" />
更改password
输入是一个简单的输入型text
。然后,在焦点事件上使用JavaScript(或JQuery),将其更改为输入类型password
。
这里是一个小未测试样本的与普通的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>
+1。我就是这么做的。 `(“#password”)。bind(“focus”,function(){$(this).val(“”); $(this).attr(“type”,“password”);});` – 2011-01-25 18:12:36
请注意,更改`input`元素的`type`在IE上将无法正常工作。另见:http://stackoverflow.com/questions/1544317/ – CMS 2011-01-25 18:15:43
一个简单的办法:
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
如果您使用HTML5,那么你应该使用placeholder attribute。
<input id="username" name="username" class="input_text" type="text" placeholder="Username" />
<input id="password" name="password" class="input_text" type="password" placeholder="Password" />
如果你使用的HTML4,您可以创建一个fake password field。
<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()" />
我还有另外一个想法来处理这个问题,你将不再需要使用Javascript:
<input onclick="value=''; type='password';" name="password" type="text" value="Password" />
或者你也可以做这样的:
<input onclick="this.value=''; this.type='password';" name="password" type="text" value="Password" />
我不知道这种可能性的区别。 你可以改变的另一件事是写,而不是onclick=.......
onfocus=.....
我也不知道这里的区别。
但我希望我能帮助你。 PS:对不起,因为我英语不好,我是德国人。
下面的代码添加到您的javascript:
function makePasswordHidden() {
document.getElementById("password").setAttribute("type", "password");
}
更改输入密码:
<input id="password" name="password" class="input_text" type="text" value="Password" onfocus="makePasswordHidden();">
这样做是什么它使输入元素的“密码”和值被更新以便它被隐藏。如果您想为值=“密码”可见如果该字段为空,然后添加以下JavaScript函数:
function makePasswordShown() {
document.getElementById("password").setAttrivute("type", "text");
}
,并添加以下到您的密码输入:
onblur="if (this.value=='') makePasswordShown(); if (this.value=='') this.value='Password';"
你可以通过动态更改字段的类型(即第一个“文本”,在激活时更改为“密码”)来破解它。我不是100%肯定这会起作用。 – 2011-01-25 18:07:28