如何禁止表单input自动填充用户名密码
博客专区 > zZach 的博客 > 博客详情
如何禁止表单input自动填充用户名密码
zZach 发表于6个月前
如何禁止表单input自动填充用户名密码
  • 发表于 6个月前
  • 阅读 40
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

1. 说明

  • 本文使用的Chrome版本是51.0.2704.106
  • 本文使用的FireFox的版本是49.0.2

2. 问题

在某个非登录的页面只有一个<input type="text">和一个<input type="password">,然后Chrome浏览器就默认填充了用户名和密码,现在需要阻止浏览器的自动填充。

3. 尝试解决

  1. 首先搜索到以下结果:

    参考链接:如何禁止(表单)用户名、密码自动填充——大宝日记

    • Mozilla 官方文档建议

      Mozilla developer documentation 建议使用表单设置属性 tautocomplete=”off” 来阻止浏览器从cache获取数据填充登录表单。

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

      但是这种方案不兼容某些Chrome、Firefox。

    • 兼容所有浏览器

      最终决定使用使用隐藏input来接受浏览器自动填充,这样不会影响用户体验,也可以兼容所有浏览器。

      <input style="display:none"><!-- for disable autocomplete on chrome -->
      <input type="text" id="username"  name="username"  autocomplete="off">
      

    但是实际上在Chrome上并没什么用,在FireFox上也只能阻止用户名自动填充。

  2. 接着搜索,又发现了个新东西

    <input type="password"  autocomplete="new-password">
    

    把password的autocomplete属性由off变成了new-password,发现Chrome不自动填充了,但是FireFox上仍然会填充用户名

  3. 再接着结合第一点尝试,最后结果是使用以下方式

    <input type="password" style="display: none;"/>
    <input type="text" autocomplete="off"/>
    
    <input class="form-control" type="password" name="tradePassword" id="txPassword" autocomplete="new-password"
    

    这样在Chrome和FireFox上就都不会填充了。

标签: html input 填充
共有 人打赏支持
粉丝 0
博文 1
码字总数 395
×
zZach
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: