欢迎光临
我们一直在努力

解决浏览器保存账号密码后自动回填的问题

本章主要讲一下解决浏览器再保存账号密码时,再一些页面会自动回填这些信息的问题。有些页面我们不希望浏览回填这些信息。

今天遇到一个问题,现在基本所有浏览器都是保存账户密码的功能,然后浏览再检测到网页中有type=”password”的文本框时就会自动回填,但是有些页面不想让用户回填写,比如修改密码页面

如下图,新密码位置直接被回填的密码给站用了。这让用户体验不爽。

最佳解决方案

这是我搜索网络并尝试后的最佳方案 (最然添加无用标签感觉怪怪的,但是不得不承认这是最佳方案)

添加两个看不见的文本框去接收浏览器回填的信息,悬浮起来,定位到一个永远看不见的位置。

//放在原密码框的上面
<span style="position: absolute;top: -10000px;"><input type="text"><input type="password"></span>

说一下其它不行的方案,避免踩坑

方法一:谷歌、360浏览器无效,其它浏览器也没就没测,直接舍弃

autocomplete="new-password"

方法二:修改readonly属性 (360浏览器测试无效,加上readonly属性后页面加载确实不回填了,但是一获取焦点瞬间回填)直接舍弃

因此像这种获取焦点改变当前属性的方案直接就舍弃了

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

 

赞(0)
未经允许不得转载:自游互动 » 解决浏览器保存账号密码后自动回填的问题
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们