美文网首页
nput输入框禁止显示历史记录

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

作者: lesdom | 来源:发表于2021-04-18 08:55 被阅读0次

    原生

    <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失效。外加前端不保存密码,且不显示历史密码记录

    相关文章

      网友评论

          本文标题:nput输入框禁止显示历史记录

          本文链接:https://www.haomeiwen.com/subject/ygsylltx.html