chrome 阻止浏览器在表单输入框聚焦/输入时显示保存的密码和账号候选框(Google 密码管理工具)

参考:

完美解决 element-ui input=password 在浏览器会自动填充密码的问题

背景:

领导要求去掉登录页的账号密码表单的自动显示账号密码候选框

定位:

  1. chrome 版本 126.0.6478.127 , 现有表单用的是原生 input 元素, 之前已经加了 autocomplete="off"readonly + onfocus 时去掉 readonly , 看起来之前就尝试去掉候选框了, 但是没啥效果; 账号和密码输入框都会触发, 要不就是一开始不触发, 清空后重新输入 或 多次 tab 切换/点击重新获取焦点后又触发了
  2. 先看 autocomplete 属性, 结果发现 off 和 new-password 都不管用
  3. 之前记得看到过使用额外的隐藏 input 欺骗浏览器的方案, 但是不想改现有表单结构 + 多写代码, 先 pass ;
  4. 再试 readonly , 毕竟之前加的这个, 有时还是生效的, 于是搜到了上面的参考文章, 参考它成功解决问题 --- 坑爹的是, 尝试过程中经常是本地 localhost 没问题, 发到测试环境域名后效果不好...

代码:

js 复制代码
<!-- vue 写的 -->

<!-- 原代码 -->
<!-- 遍历配置表单输入框配置对象数组 inputConfig , 显示账号和密码输入框 -->
<input v-model="form[item.attrName]"
       ref="loginFormInput"
       :type="item.type"
       :name="item.name"
       :id="item.id"
       :placeholder="item.placeholder"
	   :autocomplete="item.type === 'password' ? 'on' : 'off'"
       :readonly="item.type !== 'password'"
       onfocus="this.removeAttribute('readonly');"
       @blur="blur(item,form[item.val],index)"
       @focus="focus(index)"
       @change="change(form[item.val], item.val)"/>

<!-- 新代码 -->
<input v-model="form[item.val]"
       ref="loginFormInput"
       :type="item.type"
       :name="item.name"
       :id="item.id"
       :placeholder="item.placeholder"
       autocomplete="off" // 变动
       :readonly="true" // 变动
       // 删除 onfocus
       @blur="blur(item,form[item.val],index)" // 内部变动
       @focus="focus(index)" // 内部变动
       @mousedown="handleMouseDown(index)" // 新增
       @change="change(form[item.val], item.val)"/>

<script>
    export default {
        methods: {
            // 动态设置 input 的 readonly , 避免浏览器显示候选框
            handleMouseDown(index) {
                const $inputEl = this.$refs.loginFormInput[index];
                if (this.form[this.inputConfig[index].attrName] === '') {
                    $inputEl.setAttribute('readonly', 'readonly');
                    setTimeout(() => {
                        $inputEl.removeAttribute('readonly');
                    });
                } else {
                    $inputEl.removeAttribute('readonly');
                }
            },
            focus(index) {
                // 新增的相关代码
                // 避免使用 tab 键选中输入框时浏览器显示候选框
                this.handleMouseDown(index);
            },
            blur(item, val, index) {
                // 新增的相关代码
                // 失焦时设置 readonly , 不管输入框是否有值, 避免多次 tab 切换输入框后浏览器候选框又显示出来了
                const $inputEl = this.$refs.loginFormInput[index];
                $inputEl.setAttribute('readonly', 'readonly');
            }
        },
        watch: {
            'form.password': {
                handler: function(val) {
	                // 新增的相关代码
                    // 此处使用 watch 值的变化,因为使用 @input 监听时用拼音输入有问题(可用 compositionstart 解决, 但麻烦)
                    if (!val) {
                        this.handleMouseDown(1);
                    }
                },
                deep: true
            },
            'form.userName': {
                handler: function(val) {
	                // 新增的相关代码
                    // 此处使用 watch 值的变化,因为使用 @input 监听时用拼音输入有问题(可用 compositionstart 解决, 但麻烦)
                    if (!val) {
                        this.handleMouseDown(0);
                    }
                },
                deep: true
            }
        }
    }
</script>

后记:

额... 领导说不用改了, 我理解错了, 说的不是去掉候选框, 是去掉候选框里某一条记录, 客户自己进密码管理器删了就行...

相关推荐
无奈何杨4 分钟前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼6 分钟前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆17 分钟前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang26 分钟前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆33 分钟前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing41 分钟前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼3 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel10 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着11 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友12 小时前
什么是API签名?
前端·后端·安全