パスワードフィールドをアスタリスクで1秒後にhtmlで表示する方法

Question

ユーザー名とパスワードを使用してログインページを作成しています。 "input type =" password ""を使用してアスタリスクとしてパスワードフィールドを作成しましたが、生の文字を表示する前にアスタリスク記号を1秒間表示したいとします。

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

setTimeoutをjQueryで使用すると、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