关于表单屏蔽浏览器自动记住密码/自动明文提示的解决方案

今天闲着无聊，发现淘宝登录的时候浏览器会自动填充密码，如果清理了之后自己输入，居然还会明文提示曾经输入过的密码，这样如果电脑他人使用，岂不是会存在一定的安全隐患，在网上找了很多资料来解决这个问题，现在记录一下。

---

先上代码：

<form action="#" name="f" method="post">

                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input id="k_account" name="k_account" class="text" style="color: #FFFFFF !important" type="text" placeholder="请输入账户" autocomplete="new-password" disabled>
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input id="k_password" name="k_password" class="text" style="color: #FFFFFF !important; " type="text"  textmode=“password” autocomplete="new-password" onfocus="this.type='password'" disabled>
                    </div>
                    <div class="mb2"><a class="act-but submit" href="javascript:;" onclick="login()" style="color: #FFFFFF">登录</a></div>
                </form>

按照我的理解，浏览器在网页文档渲染的时候会自动识别表单中的密码框，尤其是登录的时候，会检测到user，password，account等关键字的表单，并进行默认填充更改默认样式等操作，这样有好处也有坏处，坏处就是影响我们页面的布局和样式，自动提示密码并且明文显示也会导致密码泄露，为了避免浏览器的操作，一般通常都会设计一套假的表单来欺骗浏览器，这种方式在网络上是最多的，但是用起来不太好，于是我自己参考了很多资料重新整理了一套方案。

autocomplete属性

在HTML5中autocomplete属性值设置为off就可以不用记住密码，也可以随便设置一个别的值，因为autocomplete属性默认值是no，改成off或者别的都是可以的。

disabled属性

disabled属性大家应该都很熟悉，在表单中添加该属性表单就会变成禁用状态，这样浏览器就无法再默认添加样式了，也可以改成readonly只读属性。

onfocus事件

以上俩个属性只能组织浏览器默认填充的操作，输入密码的时候还是会提示曾经输入过的密码，并且明文显示，由于input的type=passwrod会被浏览器添加提示，所以我们可以设置密码的type=text，然后添加onfocus事件，再输入的时候更改type=password

以上均经过本人测试，测试浏览器：谷歌，360浏览器，qq浏览器