Question

我正在创建一个包含用户名和密码的登录页面。我使用＆＃34;输入类型=＆＃34;密码＆＃34;＆＃34;创建了密码字段作为星号，但我希望在显示原始字符之前一秒钟后显示星号符号。

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/

＆＃13;

//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(){
	alert('pword = "' + this.pword.value + '"');
	return false;
};

＆＃13;

<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>

＆＃13;

Answer 2

您最初需要使用input类型的text字段。稍后在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使用如下所示的内容。

＆＃13;

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

＆＃13;

<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

＆＃13;

您也可以采用旧方法：

＆＃13;

//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'
});

＆＃13;

<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

＆＃13;

来源：fiddle

如何在html

3 个答案: