Поле ввода ввода в jQuery

Я пытаюсь создать страницу входа, не беспокоясь о том, что я действительно вхожу в систему, но я пытаюсь добиться эффекта, когда в поле ввода есть какой-то выцветший текст, и когда вы нажимаете на он, текст исчезает или если вы нажмете, текст снова появится.Поле ввода ввода в jQuery

У меня это работает для поля ввода «Username», но поле «Пароль» дает мне проблемы, потому что я не могу просто сделать $("#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>

Прямо сейчас, я могу нажать на поле ввода пароля и введите в него, но текст не исчезает, а «тип» не получает установлен на «пароль» ... новое поле ввода, которое я создаю, не скрывается, оно просто остается видимым, и я не уверен, где проблема. Есть идеи?

источник

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;».

<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

Я понял, что это было отмечено как ответ, но я хотел расширить решение uhleeka, используя событие onfocus. Отлично подходит для меня в 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

ответ

Смежные вопросы