解决elementUI 表单输入框浏览器自动填写问题

一般来说，输入表单、提交之后，浏览器会保存表单内容，刷新页面之后对应表单内容会自动填充。这个机制可以说是有利有弊，好的是如果经常登录同一个平台，自动填充账号密码显然可以提高效率；但如果是在注册这种场景下，每一次输入表单的内容都不相同，自动填充功能会严重影响我们的使用体验。

原生HTML
在原生html中，autocomplete 属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。

现代浏览器实现了内建的密码管理功能：当用户在一个网站上输入了用户名和密码，浏览器会为用户提供记忆功能。当用户再次访问这个网站时，浏览器使用保存的值自动填写登录字段。

即使没有主密码，浏览器内置的密码管理对安全也有益无害。由于用户不需要记住已被浏览器存储的密码，因此他们可以放心选择更强的密码。由于这个原因，许多现代浏览器都不支持在登录字段中设置 autocomplete=“off”：

如果一个网站为 设置了autocomplete=“off”，表单中包含用户名和密码字段，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。
如果网站给用户名和密码的 框设置了 autocomplete=“off”，浏览器仍会为这次登录提供记忆功能，并且如果用户同意，用户在下一次访问网站时，浏览器会自动填写这些字段。
elementUI
在vue2+elementUI的实际业务场景中，官方其实也提供了原生html提供的autocomplete=“off”，然而匪夷所思的是大概率不起作用（Google，Firefox，Microsoft Edge，360急速）都没有起作用。

mdn文档中倒是提供了一种解决方案：使用 autocomplete=“new–password” 阻止自动填充。如果你定义了一个用户管理页面，其中用户可以为其他人指定新的密码，因此你想阻止密码字段的自动填充，你可以使用 autocomplete=“new–password”。

至于以上方法的兼容性，在测试的Google，Microsoft Edge中，确实起到了作用。

所以就有一种折中的解决方案：既然浏览器要自动填充，我们就给一个具有name属性的表单让他填充，再用css的display:none将其在页面中隐藏，这样就巧妙的实现了功能，也完全兼容任何浏览器（基于目前主流浏览器的兼容性，不到万不得已不要用这个方法）。

360极速浏览器X
在该浏览器中，给元素设置属性完全没有效果，需要我们在选项–个人资料（必须登录账号）-取消勾选自动填充选项，即可生效。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MYiMVaUp-1681786725260)(https://image.lewiis.top/images/2023/04/18/f9584ab10af8a41b604e055fe4e50d67.png “取消自动填充表单”)]

编码
            <el–form
                :model=”ruleForm“
                :rules=”rules“
                ref=”ruleForm“
                label–width=”100px“
                class=”demo–ruleForm“
            &gt;
                <el–form–item prop=”phone” label–width=”0″&gt;
                    <el–input
                        v–model=”ruleForm.phone“
                        placeholder=”请输入手机号“
                        autocomplete=”off“
                    &gt;</el-input&gt;
                </el-form–item&gt;
                <el-form–item prop=”password” label–width=”0″&gt;
                    <el-input
                        :type=”passwordType“
                        v-model=”ruleForm.password“
                        placeholder=”请输入密码”
                        class=”password“
                        show–password
                        autocomplete=”new–password”
                    &gt;
                    </el-input>
                </el-form–item>
                <el-form–item label–width=”0″>
                    <el-button
                        type=”primary“
                        @click=”submitForm(‘ruleForm‘)”
                        class=”loginBtn”
                        :loading=”isLoading”
                        >登录</el-button
                    >
                </el-form–item>
            </el-form>
————————————————
版权声明：本文为CSDN博主「Lewiis」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Mitchell1696/article/details/130217074

代码007普通

打赏 收藏 海报 链接