nput输入框禁止显示历史记录

2021-04-18  本文已影响0人  lesdom

原生

<input type="text"  autocomplete="off" />

elementUI

<el-input auto-complete="new-password"></el-input>

最近看到下个版本此属性要被废弃了,注意一下。

问题

上述代码可能确实有效,但是浏览器保存的历史密码记录依然会显示出来。
解决方案如下:

<input readonly onfocus="this.removeAttribute('readonly');this.type='password';" placeholder="输入密码" v-model="form.password" autocomplete="off" />            

需求

另外提一下产品的需求,想要每次打开浏览器进入网页,用户都需要重新输入密码,这样用户就可以记住,而不是咨询客服帮助。
在网上搜索了一下,找到一个方案,就是区分浏览器关闭和刷新,当关闭的时候,清除登录的缓存。
但是有个问题是,当你关闭浏览器标签页的时候,清除缓存是有效的。但是关闭整个浏览器时,清除缓存无效。
原因是因为,这个方案是通过两个事件的时间差来区分关闭和刷新的。我记得值是5ms,刷新的时间差是大于5ms的,关闭tab标签页的时间差是小于5ms的,所以此时有效。
但是当浏览器有多个tab页打开时,浏览器关闭的时间差远远大于5ms。所以无法区分。

解决方案

最终的解决方案就是采用银行的那套方案,当你一段时间不操作后,后端判定登录token失效。外加前端不保存密码,且不显示历史密码记录

上一篇下一篇

猜你喜欢

热点阅读