浏览器保存密码自动填充问题

原文链接:https://dsx2016.com/?p=309

➢ 问题

只要打开登录界面,之前使用过得账户密码就会自动填充到输入框,隐私体验不太友好

➢ 浏览器自动填充机制

猜测是当浏览器遇到input 输入框type=text和type=password的并在一起的常见登录模式后,就会开启自动填充

表现为黄色背景,初始登录会提示是否记住密码,点击记住就会保存,下次就会自动填充

➢ 解决方式

1.使用HTML5属性autocomplete="off" ,禁用自动填充

这种方式在chrome中不生效,其他浏览器暂未测试

2.初始的时候将input设置为只读模式,当点击密码输入框时,关闭只读模式

此处使用的是iview输入框组件

<Input class="password" type="password" v-model="password" placeholder="请输入密码" autocomplete="off" :readonly="readonly" @on-focus="focusInput" />

focusInput函数为当密码输入框聚焦时,关闭只读属性

focusInput(){
          let that=this
          that.readonly=false
        },