禁止自动填充浏览器记住的密码直接写方法的几种方法,网上找了很久都没啥合适,后来某论坛上看到一个,可惜是vue,或者r

直接写方法

<!DOCTYPE html> <html lang="en">

<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>

    </div>
    <input id="a1" type="text" name="password" autocomplete="new-password" oninput="input()" onfocus="focus"
        value="" />

    <input type="password" name="password" autocomplete="new-password" />
    <div>
        方法三
        <input type="password" style="display: none;" />
        <input type="password" name="password" />
    </div>
    <div>
        方法四
        <input type="text" name="password" autocomplete="off" onfocus="this.type='password'">
    </div>
    <div>
        方法五
        <input type='text' style='display:none'>
        密码：<input type='password' autocomplete="new-password" readonly onclick="this.removeAttribute('readonly');"
            onblur="this.setAttribute('readonly',true);">


    </div>
    <div>
        方法六
        <input type="text" onfocus="this.type='password'">
    </div>
    <div>
        方法七
        <input type="password" name="txtPassword" style="display:none"> 
        <input type="password" name="txtPassword"  placeholder="请输入密码" autocomplete="off"  />
    </div>
    <div>
        方法八
        <input type="password" style="display:none;width:0;height:0;"><input data-placeholder="请输入密码" name="password" data-required="true"  type="password" autocomplete="new-password" data-max-length="50" tabindex="2" spellcheck="false" id="auto-id-1505904797992" placeholder="请输入密码">
    </div>
    <button>xx</button>
</div>

<script>
    // 禁止自动填充浏览器记住的密码
    // 原理：设置刚开始的type为text，在输入值后将type设置为password，在清空值时将type为text，并将该输入框dom销毁重建。
    function initinput(ifFocus) {
        var parent = document.getElementById('aaa');
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        input.setAttribute('autocomplete', 'new-password');
        input.style.border = Math.random() > 0.4 ? '1px solid red' : '1px solid blue';
        input.onkeyup = function (e) {
            console.log('e: ', e);
            if (e.keyCode === 13) {
                console.log('触发enter');
            }
        }
        input.oninput = function (e) {
            console.log('e: ', e);
            console.log('value: ', value);

            var value = e.target.value;
            var target = e.target;
            if (value === '' || value === undefined) {
                e.target.type = 'text';
                e.target.setAttribute('readonly', true);
                // setTimeout(() => {
                //     target.removeAttribute('readonly')
                // }, 10);
              
                parent.removeChild(e.target);
                initinput(true);
            } else {
                if (e.target.type !== 'password') {
                    e.target.type = 'password'
                }
            }
        }

        parent.appendChild(input);
        if(ifFocus){
            input.focus();
        }
    }


    initinput();
   
</script>