input field placeholder in jQuery
I'm trying to create a Login page, not worrying about actually logging in yet, but I'm trying to achieve the effect where there is some faded text inside the input field and when you click on it, the text disappears or if you click away the text reappears.
I have this working for my "Username" input field, but the "Password" field is giving me problems because I can't just do $("#password").attr("type","password"). Here's my code:
<!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 scri开发者_运维百科pt
$(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>
Right now, I can click on the password input box and type in it, but the text is not disappearing and the "type" doesn't get set to "password"... the new input field I create isn't being hidden, it just stays visible, and I'm not sure where the problem is. Any ideas?
Instead of trying to change the "type" of the password input, swap the password input with a text input. For example, show a text input with the value "Password" while the password input is "display:none;".
<input type="text" id="txtPassword" value="Password" />
<input type="password" id="password" class="..." value="" style="display:none;" />
Set a focus event on the "txtPassword" to hide the "txtPassword" and show+focus the actual password input.
Set a blur event to validate your password input and swap back to the "txtPassword" if no value has been entered.
You might want to try a plugin, for example http://plugins.jquery.com/project/inline_label
I realized this has been marked as answered, but I wanted to expand on uhleeka's solution using onfocus event. Works great for me in IE and other older browsers.
$('#textPass').focus(function(){
$(this).hide();
$('#password').css('display','inline');
$('#password').focus();
});
$('#password').blur(function(){
$(this).css('display','none');
$('#textPass').show();
});
<input type="text" id="txtPassword" value="Password" />
<input type="password" id="password" class="..." value="" style="display:none;" /
I figured it out. I created another input field after the first two instead of creating it via jQuery.
<form>
<input type="text" id="username" class="placeHolder" value="Username" />
<input type="password" id="password" class="placeHolder" value="" />
<input type="text" id="placeHolder" class="placeHolder" value="Password" />
</form>
加载中,请稍侯......
精彩评论