文档章节

如何禁止表单input自动填充用户名密码

zZach
 zZach
发布于 2017/05/25 10:21
字数 395
阅读 104
收藏 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上就都不会填充了。

© 著作权归作者所有

共有 人打赏支持
zZach
粉丝 0
博文 1
码字总数 395
作品 0
如何禁止(表单)用户名、密码自动填充

Html登录表单经常被自动填充,有的甚至用户从来没有登录过的网站也会有自动填充,甚是让人讨厌。 Mozilla developer documentation 建议使用表单设置属性 tautocomplete="off" 来阻止浏览器从...

WolfX
2016/02/20
18
0
阻止浏览器记住密码功能干扰表单填充

最近有一项目在360浏览器下面遇到一个超级恶心的问题,客户在用360浏览器登录系统后记住密码,再创建用户账户的时候,浏览器会自动将登录的用户名和密码填充到页面上去,我同事被这个问题困扰...

slimboy123
2016/01/29
0
0
浏览器--如何让登陆页面的表单不默认显示账号和密码

楼主做Javaweb项目,制作登陆页面访问时总是出现用户名和密码被自动填写的情况;如图楼主自制的网页登陆页面(这里以楼主用的Chrome为例演示) 而且很多情况下,保存是别的项目下的账户密码~...

萧沐垚
2016/12/16
39
0
Android O 密码自动填充功能测试,你觉得实用吗?

首个 Android O 开发者预览版中包含的新增功能之一就是自动填充功能。开发人员能够将自动填充 API 直接实现到他们的应用程序中,以便用户能够自动填写所需的任何安全信息,例如地址、用户名和...

王练
2017/03/26
1K
6
解决浏览器自动填充表单问题

解决浏览器自动填充表单问题 X-Space2017-12-241 阅读 表单浏览器 Mozilla 官方文档建议 Mozilla developer documentation 建议使用表单设置属性 tautocomplete=”off” 来阻止浏览器从cache...

X-Space
2017/12/24
0
0
ThinkPHP 表单数据智能写入 create 方法

创建数据对象 create() 除了手动构造入库的数据集之外,ThinkPHP 还提供了自动创建数据对象的 create() 方法。create() 方法将自动收集提交的表单数据并创建数据对象而无需人工干预,这在表单...

ywppengpeng
2016/11/21
6
0
阻止浏览器自动填充表单

在开发中涉及交易密码验证,但浏览器会自动填充表单。很自然的想到autocomplete属性。 HTML5 <form> autocomplete属性 HTML5 <input> autocomplete属性 以上两种方式在某些浏览器无效!比如:...

JackyCoder
2016/11/15
10
0
css杂类收集

单行不换行显示 需要设置宽度/或者最大宽度 width:xxxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; 如果想要设计input 输入框的边框格式 需要手动添加边框 border:1px s...

bosscheng
2015/10/21
83
0
10、表单元素(上)

一、表单元素汇总 二、表单元素解析 1、 定义表单 提交 解释:元素主要是定义本身是一组表单。 //使用get提交数据 //丧失自动提示功能 //使用_blank新建目标 2、表示用户输入数据 解释:元素...

余二五
2017/11/14
0
0
前端框架Vue(7)——Vue+ElementUI:简易login登录框重构

目标:Vue 来实现一个简易的登录框,有 用户名(user)和 密码(password),具备简单的校验。 使用的UI框架:ElementUI vue 登录框的优点: 无须操作 dom,只需建立数据模型,自动渲染。 双向...

docallen
2017/04/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 为方便需要,所有的shell脚本放到 /usr/local/sbin/ 目录下 切换到 /usr/local/sbin/ 目录下,创建告警系统脚本 #!/bin/bash#Written by aming.# 是否发送邮件的开关(1表...

Zhouliang6
8分钟前
1
0
不要再问我跨域的问题了

原文链接:web.jobbole.com 【RTC实时互联网大会 限时免费 马上报名】www.bagevent.com 写下这篇文章后我想,要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”,形成一系列内...

阿K1225
9分钟前
0
0
Tomcat配置虚拟路径

<?xml version="1.0" encoding="UTF-8"?> <Context docBase="/data/dispute_https/headPortrait/" path="/headPortrait" reloadable="true"/> <!-- 该文件名为headPortrait.xml,放在${tomca......

Helios51
11分钟前
0
0
开源PaaS Rainbond 3.6.1 Released

本次3.6.1版本更新,重点修复了3.6.0版本部分情况下会出现的BUG,同时改进了内部市场、参数验证、历史消息等功能,详细更新记录如下—— 3.6.1 功能改进 云帮初次使用跳转至注册页面 消息添加...

好雨云帮
11分钟前
0
0
Unsupported major.minor version 52.0

执行代码的jdk版本 低于 编译的jdk版本 其中52.0 对应的就是 jdk1.8版本。

@林文龙
11分钟前
0
0
聊聊spring cloud的AbstractLoadBalancingClient

序 本文主要研究一下spring cloud的AbstractLoadBalancingClient AbstractLoadBalancingClient spring-cloud-netflix-ribbon-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/netfli......

go4it
12分钟前
0
0
博客改版通知

先上博客地址 --> http://metaphors.name 最近将博客从 Jekyll 迁到了 Hexo,所以简书、开源中国、博客园、CSDN文章中的的部分图片丢了,原文链接也不可用了,不过没关系,原文链接都会转到博...

Metaphors
13分钟前
0
0
vue基础知识练习

一、Hello World <div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 --> </div><script src="js/vue.js"></script><script>var vm=new Vue({......

一个yuanbeth
16分钟前
0
0
spring @Transactional注解参数详解

原文:事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean implements TestService {} 当类中某些方法不需...

binhu
19分钟前
0
0
CORS 跨域实践

本文首发于个人微信公众号《andyqian》,期待你的关注~ 前言 系统通常都是由单体应用逐渐演化而来,演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时,随之而来的也有不...

andyqian
26分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部