2011-11-11 2 views
2

기본값이 '비밀번호'로 표시되고 포커스가있는 경우 양식 필드 힌트를 만들고 싶습니다. 필드에 사용 입력이 없으면 포커스가 사라지면 'Password'기본값으로 다시 나타납니다.비밀번호 필드에서 비밀번호 마스킹 사용 안 함

문제점 : 암호 필드의 기본값도 마스크 처리됩니다. 가면없이 '비밀번호'의 기본값을 표시하고 사용자 입력 만 마스크하려면 어떻게해야합니까?

jQuery를 코드

$(".splash_register_short_input, .splash_register_long_input").each(function() { 
    $(this).val($(this).attr('title')); 
}); 

$(".splash_register_short_input, .splash_register_long_input").focus(function() { 
    if($(this).val() == $(this).attr('title')) { 
     $(this).val(''); 
    } 
}); 

$(".splash_register_short_input, .splash_register_long_input").blur(function() { 
    if($(this).val() == '') { // If there is no user input 
     $(this).val($(this).attr('title')); 
     $(this).removeClass('splash_register_have_userinput'); 
    } else { // If there is user input 
     $(this).addClass('splash_register_have_userinput'); 
    } 
}); 

HTML 코드

<form id="splash_register_traditional_form"> 
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" /><label for="register_first_name"></label> 
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" /><label for="register_last_name"></label> 
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" /><label for="register_email"></label> 
    <input type="password" name="register_password" class="splash_register_long_input" title="Password" /><label for="register_password"></label> 
    <input type="submit" id="splash_register_signup_button" value="Sign up" /> 
</form> 

답변

6

당신은 단순히 HTML5 placeholder -attribute 사용할 수 있습니다 : 어떤 종류의 결합

<input type="password" placeholder="Enter Password..." /> 

코멘트에서 언급 한 바와 같이 이전 버전과의 호환성의 부족에 관하여, this jQuery placeholder plugin을 속성이 지원되지 않는 경우의 대체 메커니즘 (예 : this one)이 도움이 될 수 있습니다.

+2

+1 - 완전히 잊었습니다. 잘 한 선생님. – mrtsherman

+0

표준, 간단한 해결책을위한 Upvote. 그러나 이것은 이전 버전과 전혀 호환되지 않으므로 매우 강력하지는 않습니다. – rockerest

+0

그래, IE10은 * 마침내 *이 멋진 속성을 지원하는 것으로 생각합니다. 다른 사람들은 이미 그것을 가지고 있습니다. 한숨을 내 쉬어 ... –

2

를 암호 필드의 값으로하지만 암호 필드 위에 오버레이로 설정되지하는 것입니다 기본값을 할 수있는 가장 좋은 방법은 포커스가 사라지거나 사용자가 값을 다른 것으로 변경하면 사라집니다. 예를 들어, 필드 레이블 플러그인에서 사용할 수 있습니다.

http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/
http://fuelyourcoding.com/scripts/infield/
http://www.kryogenix.org/code/browser/labelify/

0

암호를 숨기려면 프로그래밍 방식으로이 줄을 추가하십시오. android.provider.Settings.System.putInt (this.getContentResolver(), android.provider.Settings.System.TEXT_SHOW_PASSWORD, 0);