项目实现|google密码回填的问题

当使用了google左上角的"管理您的密码"的功能,在遇到el-inpuit+type="password"时候,会出现密码的回填

js 复制代码
    <el-form-item label="密码" required prop="password">
        <el-input type="password" v-model="formData.password"></el-input>
    </el-form-item>

这个问题的根本原因是Google浏览器如果检测到你的代码中有text的input和password的input前后连接出现,他就会给你进行自动填充。

解决方案:

网上给了很多,我先挨着试试

  1. 设置autocomplete="off"(没有任何效果,依然自动填充)

  2. autocomplete="new-password" (不会自动填充,但是会出现记住密码的列表)

  3. 使用css的解决方案(但是这个属性很多浏览器都不兼容的,不兼容的浏览器就展示明文了)

    js 复制代码
    -webkit-text-security 指定要使用的形状来代替文字的显示。
    none 无。
    circle 圆圈。
    disc 圆形。
    square 正方形。
    js 复制代码
       // type="text"
       <el-input type="text" v-model="formData.password" class="no-autofill-pwd"></el-input>
       // css 
      .no-autofill-pwd {
        ::v-deep .el-input__inner {
            -webkit-text-security: disc !important;
        }
    }
  4. 利用google检测的原理,在前后连接的input加不显示的input (不会自动填充,但是会出现记住密码的列表)

    js 复制代码
            <el-form-item label="姓名" required prop="name">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <input type="text" name="text" style="position: absolute;left: -10000px;">
            <input type="password" name="password" style="position: absolute;left: -10000px;">
            <el-form-item label="密码" required prop="password">
                <el-input type="password" v-model="formData.password"></el-input>
            </el-form-item>
  5. 利用readonly属性(不会自动填充,但是会出现记住密码的列表)

    这种方案可以部分处理这个问题,为什么说部分处理,因为我发现点击输入框两下,还是会出现密码列表

    js 复制代码
            <el-form-item label="密码" required prop="password">
                <el-input
                    type="password"
                    v-model="formData.password"
                    :readonly="readonly"
                    @blur="readonly = true"
                    @click.native="readonly = false"
                ></el-input>
            </el-form-item>
            // data中设置readonly为true
            readonly: true,
  6. 通过失去焦点,获取焦点来控制(和使用readonly原理一样,出现的bug也一样)

    js 复制代码
        <el-input
            :type="inputType"
            @focus="this.inputType = 'password'"
            @blur="this.inputType = 'text'"
            autocomplete="new-password"
        />
相关推荐
小*-^-*九2 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
AI视觉网奇4 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1234 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡7 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh7 小时前
less和sass
前端·less·sass
Nan_Shu_6148 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel9 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登9 小时前
【Nest】基本概念
javascript·node.js·express
老华带你飞10 小时前
机电公司管理小程序|基于微信小程序的机电公司管理小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·微信小程序·小程序·机电公司管理小程序
前端小白从0开始10 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools