我正在尝试创建一个登录页面，还没有担心实际登录，但我正在尝试实现输入字段中有一些褪色文本的效果，当您单击它时，文本消失或者如果您点击离开，文字重新出现。
我有这个适用于我的“用户名”输入字段，但“密码”字段给我带来了问题，因为我不能只做$("#password").attr("type","password"). 这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- Links -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Scripts -->
<script type="text/javascript" src="jQuery.js"></script>
<script>
// document script
$(document).ready(function(){
// login box event handler
$('#login').click(function(){
$('.loginBox').animate({
height: '150px'
},
'1000'
);
$('#username').show();
// add pw placeholder field
$('#password').after('<input type="text" id="placeHolder" value="Password" class="placeHolder" />');
$('#password').hide();
});
// username field focus and blur event handlers
$('#username').focus(function() {
if($(this).hasClass('placeHolder')){
$(this).val('');
$(this).removeClass('placeHolder');
}
});
$('#username').blur(function() {
if($(this).val() == '') {
$(this).val('Username');
$(this).addClass('placeHolder');
}
});
// password field focus and blur event handlers
$('#placeHolder').focus(function() {
$('#placeHolder').hide();
$('#password').show();
$('#password').focus();
});
$('#password').blur(function() {
if($('#password').val() == '') {
$('#placeHolder').show();
$('#password').hide();
}
});
});
</script>
</head>
<body>
<div id="loginBox" class="loginBox">
<a id="login">Proceed to Login</a><br />
<div id="loginForm">
<form>
<input type="text" id="username" class="placeHolder" value="Username" />
<input type="password" id="password" class="placeHolder" value="" />
</form>
</div>
</div>
</body>
</html>
现在，我可以点击密码输入框并输入它，但文本没有消失，“类型”没有被设置为“密码”......我创建的新输入字段没有被隐藏，它只是保持可见，我不确定问题出在哪里。有任何想法吗？
不要尝试更改密码输入的“类型”，而是将密码输入与文本输入交换。例如，显示值为“Password”的文本输入，而密码输入为“display:none;”。
<input type="text" id="txtPassword" value="Password" />
<input type="password" id="password" class="..." value="" style="display:none;" />
在“txtPassword”上设置焦点事件以隐藏“txtPassword”并显示+焦点实际输入的密码。
设置一个模糊事件来验证您的密码输入，如果没有输入任何值，则切换回“txtPassword”。
| 归档时间： |
|
| 查看次数： |
11030 次 |
| 最近记录： |