如何解决Chrome登录后被记住密码问题？自定义Input密码框方案

Julone_Lee
291 阅读3分钟

需求背景

用过Chrome/Edge的开发人员应该都使用过自带的密码功能，可以同步方便的进行登录，本质是为了统一登录。但在最近发现，当账户名与主站同名时，会出现账号相互复写的问题。

image.png

登录后，更会主动提示用户是否要保存，对于我们开发人员来说，可能懂得要去规避这些问题，但现实工作中遇到的更多的用户是，默默的点下保存。

image.png

那有没有什么办法绕开浏览器的这个机制呢？

我们需要先进行浏览器关于此功能的设计分析，我们注意到它一般出现的条件有两个：

  1. 页面中存在Input#password输入框
  2. 网页发生了URL的跳转

方案一：在合适的条件去切换密码框的type类型

const formData = ref({
    password: ""
})
const passwordType: any = computed(() => {
  return showPsw.value ? 'text' : !!formData.value.password ? 'password' : 'text';
});

高高兴兴的实现后发现，并没有任何效果，登录后依旧会存在弹出请求保存密码。写了几个demo分析发现，只要存在过password类型的文本框就会被记录下来。

方案二：能不能实现自定义密码框

按照这个逻辑的话，我们的登录页面中也就不能出现任何password文本框，看来唯一的办法也就是我们自己撸个密码框了。

这里借用其它小伙伴的一些实现方法： blog.csdn.net/woisking2/a…

嘻嘻嘻，偷懒就不写了，但是很明显的发现，这个办法有点太过复杂了。

方案三：能不能用CSS来解决

以上方法下来，都不能实现我们0成本来实现这个功能的需求，那有没有办法更省时省力的解决呢？那我们思考的方向就转换成了，如果文本框的类型一定是要text，我们只要做到让用户在输入的过程中看不到文本就可以了！

鲁迅：JS做不到的事情，那就用CSS。

一开始想的是，我们引用一个font-family，然后这个font-family对于任何字符都是展示*是不是就可以了呢？后面想着，应该是有相关属性的，一顿搜索后找到了: -webkit-text-security

image.png

既然如此，我们的代码就变得非常简单了：

  <t-input
            v-model="formData.password"
            :type="passwordType"
            placeholder="请输入登录密码"
            :style="{ '-webkit-text-security': showPsw ? 'none' : 'disc' }"
          >
            <template #suffix-icon>
              <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
            </template>
   </t-input>

image.png

然后我们还需要加入一下对于不支持这个属性的浏览器的支持：

const passwordType: any = computed(() => {
  return window.CSS.supports('-webkit-text-security', 'disc') ? 'text' : 'password';
});

线上测试后，由于我们都是text，浏览器会默认识别我们这些知识普通的输入框，所以不会再提示保存密码等操作，同时也可以实现普通密码框所需要的输入掩码的需求，可以满足一些产品不想用密码记录等问题。

总结

good good study, day day up!

avatar
文章
阅读
粉丝