如何在標籤被用作值時在密碼輸入字段中以明文形式顯示密碼？

我使用下面的代碼，也看到在這個小提琴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>

來源

2011-09-28 Anagio

小提琴：http://jsfiddle.net/WqUZX/

有沒有辦法做到這一點。說，*是「隱藏」密碼的字符。當輸入那個字符時，腳本不能「記住」它。當用戶按下字符串中delete或backspace鍵可能會出現另一個問題。在輸入框中粘貼字符串也會導致問題。

當然，您可以使用selectionStart,selectionEnd和一堆按鍵事件偵聽器來實現此功能。然而，這種方法不防水。

最接近的可靠的解決方案是改變type到text上聚焦，並返回到password上模糊。可以使用mouseover來顯示密碼。這樣，用戶可以很容易地選擇他是否想要使用show-password功能。

來源

2011-09-28 21:03:58

謝謝，我沒有看到一個字母顯示，然後像下面的答案iPhone jQuery插件蒙面。你能在jsfiddle中給我看一個切換輸入類型的例子嗎？ – Anagio

更新回答，添加一個鏈接。我還在小提琴中加入了一個'mouseover'和'mouseout'的例子。 –

鼠標出很好的工作，因爲模糊和重點用我的標籤被用作值是矛盾的。感謝Rob – Anagio

可以使用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。

來源

2011-09-28 21:07:21 Bojangles

無需推倒重來，如果有人已經做到了：

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

這只是一個例子，我發現了一個快速谷歌。我確信其他網絡開發博客中有一個更清晰的例子，但我不記得哪一個不幸。

如果要自制一個解決方案，你總是可以看到上面的插件是怎麼做的，並開發自己的解決方案基於以下原則。

來源

2011-09-28 21:29:08

如何在標籤被用作值時在密碼輸入字段中以明文形式顯示密碼？

回答

相關問題