當標簽用作值時，如何在密碼輸入字段中以明文顯示密碼？

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為password 。

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

或者，您可以使用mouseover來顯示密碼。 這樣，用戶可以容易地選擇是否要使用show-password功能。

Answer 2

您可以使用HTML5 placeholder屬性，但相當多的瀏覽器不支持它。 作為一個解決方案，我寫的這個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開發博客肯定有一個更清晰的例子，但遺憾的是我不記得哪一個。

如果您想自制一個解決方案，您可以隨時查看上述插件是如何進行的，並根據原則開發自己的解決方案。