如何在html中显示密码字段为第二个星号后

Question

我正在使用用户名和密码创建登录页面。我使用“input type =”password“”创建了密码字段作为星号，但是我希望在显示原始字符之前一秒钟后显示星号。

Answer 1

你可以使用这个插件，它与所有设备兼容。 https://blog.decaf.de/2009/07/07/iphone-like-password-fields-using-jquery/

这里是另一种解决方案，但是这个不会隐藏最后一个字符，除非你从字段模糊。 http://www.sitepoint.com/better-passwords-1-the-masked-password-field/

//apply masking to the demo-field 
 
//pass the field reference, masking symbol, and character limit 
 
new MaskedPassword(document.getElementById("demo-field"), '\u25CF'); 
 

 
//test the submitted value 
 
document.getElementById('demo-form').onsubmit = function(){ 
 
\t alert('pword = "' + this.pword.value + '"'); 
 
\t return false; 
 
};

<script src="http://www.sitepoint.com/examples/password/MaskedPassword/MaskedPassword.js"></script> 
 

 
<form id="demo-form" action="#"> 
 
    <fieldset> 
 
     <label for="demo-field"><strong>This is a masked-password field.</strong> Type into the field to see the masking effect:</label> 
 
     <span style="position: relative;"> 
 
     <input type="hidden" name="pword" value="sasasas"> 
 
     <input class="password masked" id="demo-field" value="" type="text" autocomplete="off"> 
 
     </span> 
 
    </fieldset> 
 
</form>

Answer 2

您需要使用text类型的input领域开始。后来在setTimeout，您可以更改类型password，如下图所示：

HTML：

<label>Password</label> 
<input type="text" name="password" value="p@ssw0rd" /> 

JS：

setTimeout(function() { 
    document.getElementsByTagName('input')[0].type = "password" 
}, 1000); 

请参考这里的demo。

Answer 3

在jQuery中使用setTimeout您可以将attr从type=text更改为password。但这不是一个好方法。

您可以使用如下所示使用mouse-over/mouse-out。

$(document).ready(function(){ 
 

 
    $("#method2").mouseover(function(){ 
 
     this.type = "text"; 
 
    }).mouseout(function(){ 
 
     this.type = "password"; 
 
    }) 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<input type="password" id="method2" value="" placeholder="Type in your password" /> Event using mouseover and mouseout

你也可以做旧的方式：

//Place this plugin snippet into another file in your applicationb 
 
(function ($) { 
 
    $.toggleShowPassword = function (options) { 
 
     var settings = $.extend({ 
 
      field: "#password", 
 
      control: "#toggle_show_password", 
 
     }, options); 
 

 
     var control = $(settings.control); 
 
     var field = $(settings.field) 
 

 
     control.bind('click', function() { 
 
      if (control.is(':checked')) { 
 
       field.attr('type', 'text'); 
 
      } else { 
 
       field.attr('type', 'password'); 
 
      } 
 
     }) 
 
    }; 
 
}(jQuery)); 
 

 
//Here how to call above plugin from everywhere in your application document body 
 
$.toggleShowPassword({ 
 
    field: '#test1', 
 
    control: '#test2' 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Password: 
 
<input type="password" id="test1" value="" placeholder="Type your password" /> 
 
<input id="test2" type="checkbox" />Show password

来源：fiddle