2011-11-11 6 views
2

デフォルト値が「パスワード」を示し、フォーカスを当てるとフォームフィールドのヒントを作成したい場合、それはなくなります。フィールドが使用入力なしでフォーカスを失った場合、デフォルト値「パスワード」に戻ります。パスワードフィールドのパスワードマスキングを無効にする

問題:パスワードフィールドのデフォルト値も同様にマスクされます。 「パスワード」のデフォルト値をマスクすることなく表示するにはどうしたらよいですか?それを行うには

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

属性がサポートされていない場合の代替メカニズム(例えば、this oneなど)が役立ちます。

+2

+1 - 完全に忘れました。よくやった。 – mrtsherman

+0

標準、シンプルなソリューションのためのUpvote。しかし、これは下位互換性が全くないため、あまり堅牢ではありません。 – rockerest

+0

さて、私はIE10が*最終的にはこの最も素晴らしい属性をサポートすることになっていると思います。他にも誰もがすでにそれを持っています。 –

2

ベストな方法は、パスワードフィールドの値としてではなく、パスワードフィールドの上にオーバーレイとしてデフォルト値を設定していないことであろうフォーカスがなくなったときやユーザーが値を別のものに変更したときに消えます。既存のjquery in-field-labelプラグインを使用することができます。 this jQuery placeholder pluginはいくつかの種類と組み合わせて、コメントで述べたように後方互換性の欠如に関する

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

:あなたは、単にHTML5 placeholder -attributeを使用することができます

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);