浏览器默认行为
默认行为：自动填充（自动补全）、密码下拉框、记住密码。
关于具体机制，网上没有找到详细的解释。在别人的技术文档里找到这段话：
首先看看浏览器填充表单密码的机制（各浏览器机制有些许不同），以 Chrome 为例，机制如下：
- 此域名下保存过用户信息。
- 找到第一个
input[type=password]元素，填充密码； 再找到其上一个input[type=text]元素，填充用户名。
禁用自动填充
autocomplete="new-password" 可以阻止浏览器的自动填充，但阻止不了 是否记住/更新密码提示框。
实测chrome type=password时密码下拉框也阻止不了。
autocomplete="off" 完全没用，因为这个选项大部分浏览器都会忽略。
许多现代浏览器都不支持在登录字段中设置
autocomplete="off"：
- 如果一个网站为 form 设置了
autocomplete="off"，表单中包含用户名和密码字段，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。- 如果网站给用户名和密码的 input 框设置了
autocomplete="off"，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。
如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用
autocomplete="new-password"。这只是一个提示，浏览器不一定要遵守。但现代浏览器都已停止在设置了
autocomplete="new-password"的<input>元素上使用自动填充。
参考：
HTML 属性：autocomplete - HTML（超文本标记语言） | MDN
"autocomplete" | Can I use... Support tables for HTML5, CSS3, etc
禁用密码下拉框
现象：type=password时，在聚焦输入框时会出现密码下拉框。
所以，使用 readonly 属性，在聚焦后移除readonly。
代码：
import Vue from "vue";
// 处理浏览器对 type=password 的 自动填充 和 密码提示下拉框（但是无法处理 记住密码 的弹框）
Vue.directive("pwd-readonly", {
inserted(el) {
const inputElement = el.querySelector(".el-input__inner");
inputElement.readOnly = true;
if (!inputElement) {
return;
}
inputElement.oninput = function (event) {
handleEvent(event);
};
inputElement.onmousedown = function (event) {
handleEvent(event);
};
function handleEvent(event) {
// 值为空时，只读，下一帧改为非只读
if (event.target.value === "") {
inputElement.readOnly = true;
window.requestAnimationFrame(() => {
inputElement.readOnly = false;
});
}
}
},
});
实测结果：还是会出现记住密码的提示框，最后没有采用。
禁止记住密码
需求：不得实现浏览器记住账号、密码功能。
根据现象可推测，不出现type=password，就不会出现记住密码弹框，同时也不会出现自动填充和密码下拉框。
所以，不出现type=password的话，用什么来实现加密功能呢？
列出三种方法：css样式、css字体、js事件
1、-webkit-text-security
<!--
<el-input v-model="formData.password" @keyup.enter.native="handleLogin" show-password>
</el-input>
<el-input v-model="formData.password" @keyup.enter.native="handleLogin" type="password">
</el-input>
-->
<el-input v-model="formData.password" @keyup.enter.native="handleLogin" :class="{ 'pwd-disc': passwordHide }">
<i slot="suffix" class="el-input__icon el-icon-view" @click="passwordHide = !passwordHide"></i>
</el-input>
// 密码下拉框隐藏的方案：password改为text，通过点击小眼睛 + -webkit-text-security 实现切换小圆点
.pwd-disc .el-input__inner {
-webkit-text-security: disc !important;
}
实测结果：火狐的placeholder也会被加密。鉴于浏览器兼容性还行、
代码改动较小，采用的这个方法。
参考地址：developer.mozilla.org/en-US/docs/…
注：非标准！！！！虽然兼容性还行。
2、全是 “●”的字体
参考库text-security，实现了-webkit-text-security的效果。
代码：
效果：
实测结果：placeholder也会被加密，其他表现与-webkit-text-security: disc一致。
参考地址：
禁用input自动补全，模拟type=password输入字符显示为星号
GitHub - noppa/text-security: Cross-browser alternative to -webkit-text-security
3、手动替换文本内容为 “●”
改动较大，没有采用。
最后
内容大多网上冲浪所整理，或许也有更好的方法。
