如何在标签被用作值时在密码输入字段中以明文形式显示密码？

我使用下面的代码，也看到在这个小提琴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

如何在标签被用作值时在密码输入字段中以明文形式显示密码？

回答

相关问题