禁止 input 自动填充

在编写 Form 表单样式的时候，修改自动填充后的 input 样式是很麻烦甚至不可行的，而且还有一些不需要自动填充的场景。
浏览器根据保存数据时表单控件的 type 和 name 去匹配。
常用的就是 type 为 password，name 为 emal、username、password、telephone 等，甚至不设置 name。
浏览器会在表单加载时候匹配到之前保存的表单空间，然后将保存在客户端的信息自动填充它，额外的数据可能会填充到相邻的表单控件中。
可以通过设置 autocomplete 为 off 关闭自动填充功能。
input 的 autocomplete 表示这个控件的值是否可被浏览器自动填充，设置为 off 表示用户必须手动填值，或者该页面提供了自己的自动补全方法。浏览器不对此字段自动填充。。
但是，当表单控件获取焦点时，浏览器仍会显示自动填充提示（选项框）。
而且实际情况下 type 为 password 的表单控件即便设置了 autocomplete="off" 也不能有效禁止自动填充（大部分下不起作用）。
幸运的是将 autocomplete 设置为 new-password 可以成功禁止，它表示新密码（如创建帐号或更改密码时使用）。
参考的是163邮箱：
而它的兼容性也不错：

方案总结

要想禁止表单控件的自动填充功能，可以给这个 input 添加 autocomplete="new-password" 的属性，一个表单中如果存在多个 type="password" 只需给其中一个（无论哪一个）设置这个属性即可全部禁止。
设置 new-password 也可以禁止浏览器弹出自动填充提示，包括 type="password" 以外的控件。

禁止 input 自动填充相关推荐

iOS表单input自动填充后背景色变为黄色
ios表单Input自动填充背景色变为黄色问题描述解决方案问题描述在开发页面的时候发现,在iOS上input框自动填充后input的背景色变为黄色,再点击一下就可以恢复正常. 解决方案设置自 ...
禁止浏览器自动填充input解决方案
网上找了很多禁止浏览器自动推荐input值的办法,推荐的方法有几种: 1.设置input的autocomplete="off" 2.设置input的autocomplete=&qu ...
如何禁止浏览器自动填充
本文由 Deguang 发表于码路-技术博客浏览器的保存账户密码功能,给我们带来了很大的便利,但是在有些情况下,我们并不希望浏览器帮我们填充一些表单,然而autocomplete的一些参数项并不能 ...
清除input自动填充背景色
HTML输入框input标签自动填充背景色可以通过CSS的autofill伪类修改取消,自动填充字体颜色则可以通过CSS的text-fill-color属性设置以谷歌浏览器chrome为例: inp ...
input自动填充后背景颜色被覆盖的问题
问题: input输入框自动填充时,背景色会发生改变解决: 添加以下css样式 input:-internal-autofill-previewed, input:-internal-autofil ...
浏览器input自动填充
浏览器记住密码之后,账号密码框自动填充到input当中,输入框的背景色为白色,color为黑色,目标是去除这些自动填充之后的默认样式. 在reset.css当中写入填充后的样式 input:-webk ...
element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码
element-ui 去掉谷歌浏览器el-input组件自动填充账号密码效果图一.主要代码之el-input 二.主要代码之input 1.使用element中el-input自带的属性auto- ...
禁止浏览器自动填充账号密码
登录页面常用,登录后浏览器自动填充账号密码,非常不安全,一般为了方便都设置记住密码功能. 解决方法: 方法一设置autocomplete为off,适用于普通文本框 <input type=&q ...
input自动填充-Autocomplete
首先需要下载包地址是点击打开链接. 页面引用 <script type="text/javascript" src="${base}/autocom/jquery ...

禁止 input 自动填充

禁止 input 自动填充

方案总结

禁止 input 自动填充相关推荐

最新文章

热门文章