在jQuery中输入字段占位符

我正在尝试创建一个登录页面，但并不担心实际登录，但我试图实现在输入字段中出现一些淡化文本并点击它，文本消失或者如果你点击文本重新出现。在jQuery中输入字段占位符

我有这个工作为我的“用户名”输入字段，但“密码”字段给我的问题，因为我不能只是做$("#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” ...我创建的新输入字段没有被隐藏，只是保持可见，我不确定问题出在哪里。有任何想法吗？

来源

2010-06-08 Hristo

我想通了。在前两个之后我创建了另一个输入字段，而不是通过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>

来源

2010-06-09 00:17:58 Hristo

你可能想尝试一个插件，例如http://plugins.jquery.com/project/inline_label

来源

2010-06-09 00:13:46 azatoth

，而不是试图改变密码输入的“类型”，交换密码输入与文本输入。例如，在密码输入为“display：none;”时显示带有“Password”值的文本输入。

<input type="text" id="txtPassword" value="Password" /> 
<input type="password" id="password" class="..." value="" style="display:none;" />

在“txtPassword”上设置焦点事件以隐藏“txtPassword”，并显示+将焦点输入实际的密码。

设置一个模糊事件来验证您的密码输入，并在没有输入任何值的情况下交换回“txtPassword”。

来源

2010-06-09 00:17:45 uhleeka

我意识到这一点已被标记为回答，但我想利用onfocus事件uhleeka的解决方案扩大。在IE和其他旧版浏览器中适用于我。

$('#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;"/

来源

2012-03-24 19:07:49

在jQuery中输入字段占位符

回答

相关问题