如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?
当前回答
Chrome的解决方案是在输入类型密码中添加autocomplete=“new password”。请检查以下示例。
例子:
<form name="myForm"" method="post">
<input name="user" type="text" />
<input name="pass" type="password" autocomplete="new-password" />
<input type="submit">
</form>
如果Chrome找到一个密码类型的框,它总是自动完成数据,这足以表明该框的自动完成=“新密码”。
这对我很有用。
注意:使用F12确保更改生效。很多时候,浏览器都会将页面保存在缓存中,这给我一个不好的印象,认为它不起作用,但浏览器实际上并没有带来更改。
其他回答
要防止浏览器自动填充用户保存的站点登录凭据,请在表单顶部放置一个文本和密码输入字段,该字段具有非空值,并设置样式“position:aabsolute;top:-999px;left:-999px”以隐藏字段。
<form>
<input type="text" name="username_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<input type="password" name="password_X" value="-" tabindex="-1" aria-hidden="true" style="position: absolute; top: -999px; left:-999px" />
<!-- Place the form elements below here. -->
</form>
在密码字段之前有一个文本字段很重要。否则,在某些情况下可能无法阻止自动填充。
重要的是文本和密码字段的值不能为空,以防止在某些情况下覆盖默认值。
这两个字段必须在表单中的“真实”密码类型字段之前。
对于兼容html 5.3的较新浏览器,自动完成属性值“新密码”应该有效。
<form>
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
这两种方法的组合可用于支持较旧和较新的浏览器。
<form>
<div style="display:none">
<input type="text" readonly tabindex="-1" />
<input type="password" readonly tabindex="-1" />
</div>
<!-- Place the form elements below here. -->
<input type="text" name="username" value="" />
<input type="password" name="password" value="" autocomplete="new-password" />
</form>
Google Chrome忽略某些输入的autocomplete=“off”属性,包括密码输入和按名称检测的常见输入。
例如,如果您输入的是姓名地址,那么Chrome将根据其他网站上输入的地址提供自动填充建议,即使您告诉它不要这样做:
<input type="string" name="address" autocomplete="off">
如果您不希望Chrome这样做,那么可以重命名或命名表单字段的名称:
<input type="string" name="mysite_addr" autocomplete="off">
如果您不介意以前在站点上输入的自动完成值,那么可以保持启用自动完成。域名的名称间距应足以防止从其他站点记住的值出现。
<input type="string" name="mysite_addr" autocomplete="on">
不要使用JAVASCRIPT修复此问题!!
首先使用HTML解决此问题,以防浏览器未使用脚本、无法使用您的脚本版本或脚本已关闭。请始终在HTML之上最后一层脚本。
对于具有“text”类型属性的常规输入表单字段,请在元素上添加autocomplete=“off”。由于用户浏览器覆盖设置,这可能在现代HTML5浏览器中不起作用,但它会照顾到许多旧浏览器,并停止大多数浏览器中的自动完成下拉选项。注意,我还包括了所有其他可能会让用户感到不快的自动完成选项,如autocapitalize=“off”、autocorrect=“off”和spellcheck=“false”。许多浏览器不支持这些功能,但它们增加了额外的“附加”功能,这会让数据输入人员感到烦恼。注意,例如,如果用户的浏览器设置为启用了自动填充,Chrome会忽略“关闭”。因此,实现浏览器设置可以覆盖此属性。
例子:
<input type="text" id="myfield" name="myfield" size="20" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter something here..." title="Enter Something" aria-label="Something" required="required" aria-required="true" />
对于用户名和密码输入类型字段,对于触发“关闭”功能的更具体的自动完成属性,浏览器的支持有限。用于登录的文本输入上的autocomplete=“username”将迫使某些浏览器重置并删除自动完成功能。autocomplete=“new password”将尝试使用“password”类型输入字段对密码执行相同操作。(见下文)。然而,这些是特定浏览器的专有技术,在大多数情况下都会失败。不支持这些功能的浏览器包括Internet Explorer 1-11、许多Safari和Opera桌面浏览器,以及一些版本的iPhone和Android默认浏览器。但它们提供了额外的力量来尝试并强制删除自动完成。
例子:
<input type="text" id="username" name="username" size="20" value="" autocomplete="username" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter username here..." title="Enter Username" aria-label="Username" required="required" aria-required="true" />
<input type="password" id="password" name="password" size="20" minlength="8" maxlength="12" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,12}" value="" autocomplete="new-password" autocapitalize="off" autocorrect="off" spellcheck="false" tabindex="0" placeholder="Enter password here..." title="Enter Password: (8-12) characters, must contain one number, one uppercase and lowercase letter" aria-label="Password" required="required" aria-required="true" />
现在寻找更好的解决方案!
由于标准机构和浏览器对HTML5的支持分散,许多现代HTML5属性在许多浏览器中都失败了。所以,一些孩子转向脚本来填补这些漏洞。但这是懒惰的编程。使用JavaScript隐藏或重写HTML会使情况变得更糟,因为您现在有一层又一层的脚本依赖关系,再加上HTML补丁。避免这种情况!
要在表单和字段中永久禁用此功能,最好的方法是每次在“input”元素上创建一个自定义的“id”/“name”值,使用一个唯一的值,如连接到字段id和name属性的日期或时间,并确保它们匹配(例如“name=password_{date}”)。
<input type="text" id="password_20211013" name="password_20211013" />
这破坏了愚蠢的浏览器自动完成选择算法,该算法会嗅探触发这些字段过去值的匹配名称。通过这样做,浏览器无法将以前表单数据的缓存与您的匹配。它将强制关闭“自动完成”,或显示空白列表,并且不再显示任何以前的密码!在服务器端,您可以创建这些自定义输入“命名”字段,并通过简单地解析id/name的第一部分,从用户浏览器的响应中识别和提取正确的字段。例如“password_”或“username_”等。当字段的“name”值出现时,只需解析第一部分(“password_{date}”)并忽略其余部分,然后在服务器上提取值。
容易的
只需在输入中自动完成=“off”list=“autocompleteOff”,即可完成IE/Edge的工作!对于chrome,添加autocomplete=“新密码”
如果您的问题是自动填写密码字段,那么您可能会发现这很有用。。。
我们在网站的几个领域遇到了这个问题,在这些领域中,业务部门希望重新查询用户的用户名和密码,特别是出于合同原因,不希望自动填充密码。我们发现,最简单的方法是输入一个假密码字段,以便浏览器查找和填充,而真实密码字段保持不变。
<!-- This is a fake password input to defeat the browser's autofill behavior -->
<input type="password" id="txtPassword" style="display:none;" />
<!-- This is the real password input -->
<input type="password" id="txtThisIsTheRealPassword" />
请注意,在Firefox和IE中,将任何类型的密码输入放在实际输入之前就足够了,但Chrome识破了这一点,并迫使我实际命名假密码输入(通过给它一个明显的密码id),以使其“咬”。我使用了一个类来实现样式,而不是使用嵌入样式,所以如果由于某种原因,上面的方法不起作用,请尝试这样做。
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击