ラベルを値として使用している場合、パスワード入力フィールドにクリアテキストでパスワードを表示するにはどうすればいいですか？

Question

私は以下のコードを使用していますが、このフィドルhttp://jsfiddle.net/peter/Xt5qu/にも入力値としてラベルを使用しています。どのような変更を行うことができますので、パスワードフィールドにはラベルはクリアテキストですが、入力すると非表示になります。

<form id="new_account_form" method="post" action="#" class="login-form"> 
<ul> 
<li> 
      <label for="user_email">Email address</label> 
      <input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text"> 
      </li> 
      <li> 
      <label for="user_password">Password</label> 
      <input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password"> 
</li> 
<li> 

    <input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li> 
</ul> 
</form> 

<script script type="text/javascript"> 
this.label2value = function(){ 

    // CSS class names 
    // put any class name you want 
    // define this in external css (example provided) 
    var inactive = "inactive"; 
    var active = "active"; 
    var focused = "focused"; 

    // function 
    $("label").each(function(){  
     obj = document.getElementById($(this).attr("for")); 
     if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){   
      $(obj).addClass(inactive);   
      var text = $(this).text(); 
      $(this).css("display","none");   
      $(obj).val(text); 
      $(obj).focus(function(){  
       $(this).addClass(focused); 
       $(this).removeClass(inactive); 
       $(this).removeClass(active);         
       if($(this).val() == text) $(this).val(""); 
      }); 
      $(obj).blur(function(){ 
       $(this).removeClass(focused);              
       if($(this).val() == "") { 
        $(this).val(text); 
        $(this).addClass(inactive); 
       } else { 
        $(this).addClass(active);  
       };    
      });    
     }; 
    });  
}; 
// on load 
$(document).ready(function(){ 
    label2value(); 
}); 
</script> 

Answer 1

フィドル：http://jsfiddle.net/WqUZX/

それをする方法はありません。いいえ、*は、パスワードを「隠す」文字です。その文字を入力すると、スクリプトはそれを "覚える"ことができません。ユーザーが文字列内のdeleteまたはbackspaceキーを押すと、別の問題が発生する可能性があります。入力ボックスに文字列を貼り付けると、問題が発生する可能性もあります。

もちろん、selectionStart,selectionEndなどのキーイベントリスナーを使用してこのような機能を実装できます。しかしながら、この手法は防水性ではない。

最も信頼性の高いソリューションは、typeをtextに、そしてぼかしでpasswordに戻しています。

$("#user_password").focus(function(){ 
    this.type = "text"; 
}).blur(function(){ 
    this.type = "password"; 
}) 

また、mouseoverを使用してパスワードを表示することもできます。このようにして、ユーザーはショーパスワード機能を使用するかどうかを簡単に選択できます。

Answer 2

属性はHTML5 placeholderですが、かなりの数のブラウザでサポートされていません。解決策として、this JSFiddleがあります。これは、focusとblurイベントでパスワード入力を標準テキスト入力に置き換えます。逆も同様です。

コード：

$(document).ready(function() { 
    $("input[name='password']").prop("type", "text").val("Password"); 
}); 

$("input[name='password']").focus(function() { 
    if($(this).val() === "Password") 
    { 
     $(this).prop("type", "password").val(""); 
    } 
}); 

$("input[name='password']").blur(function() { 
    if(!$(this).val().length) 
    { 
     $(this).prop("type", "text").val("Password"); 
    } 
}); 

これは優雅JavaScriptが無効になっている人のために低下します。

Answer 3

誰かがすでにそれを行っている場合、車輪を再発明する必要はありませんが：

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

私は簡単にGoogleで見つけほんの一例です。私は、他のWeb開発ブログの1つがもっと洗練された例を持っていることは確かですが、どちらが残念なことに覚えていないのです。

ソリューションを自作したい場合は、上記のプラグインがどのように機能しているかを常に確認し、その原則に基づいて独自のソリューションを開発することができます。