如何在主要浏览器中禁用特定输入(或表单字段)的自动完成?


当前回答

如果仅自动完成=“off”不起作用,也可以尝试以下操作:

autocorrect="off" autocapitalize="off" autocomplete="off"

其他回答

您可以在属性name how电子邮件地址中向表单添加名称,并生成电子邮件值。例如:

<form id="something-form">
  <input style="display: none" name="email" value="randomgeneratevalue"></input>
  <input type="password">
</form>

如果使用此方法,Google Chrome将无法插入自动填充密码。

Firefox 30忽略密码的autocomplete=“off”,而是选择提示用户密码是否应存储在客户端上。请注意2014年5月5日的以下评论:

密码管理器始终提示是否要保存密码。未经用户许可,密码不会保存。我们是继IE和Chrome之后第三个实现这一改变的浏览器。

根据Mozilla开发者网络文档,布尔表单元素属性autocomplete防止表单数据在旧浏览器中缓存。

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

在这次谈话中,没有一个解决方案对我有效。

我终于找到了一个纯HTML解决方案,它不需要任何JavaScript,可以在现代浏览器中工作(除了Internet Explorer;至少要有一个捕获,对吗?),并且不需要对整个表单禁用自动完成。

只需关闭表单上的自动完成功能,然后为您希望在表单中工作的任何输入打开它。例如:

<form autocomplete="off">
    <!-- These inputs will not allow autocomplete and Chrome
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- This field will allow autocomplete to work even
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

固定的只需在实际输入字段上方添加

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion-MDNhttps://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908-中等在EDGE、Chrome(最新版本63)、Firefox Quantum(57.0.4 64-бит)、Firefox(52.2.0)上测试假字段是chrome/opera自动填充错误字段的一种解决方法

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

<TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

我必须花了两天的时间来讨论这一问题,然后才能制定自己的解决方案:

首先,如果它适用于任务,则放弃输入并使用文本区域。据我所知,自动填充/自动完成在文本区域没有业务,就我们正在努力实现的目标而言,这是一个很好的开始。现在,您只需更改该元素的一些默认行为,使其充当输入。

接下来,您将希望将任何长条目保持在同一行上,如输入,并希望文本区域与光标一起沿y轴滚动。我们还想去掉调整大小框,因为我们正在尽力模拟输入的行为,而输入没有调整大小句柄。我们通过一些快速CSS实现了所有这些:

#您的文本区域{调整大小:无;overflow-y:隐藏;空白:nowrap;}

最后,您需要确保讨厌的滚动条不会出现,破坏聚会(对于那些特别长的条目),因此确保文本区域不会显示:

#您的文本区域::-webkit滚动条{显示:无;}

轻松点。此解决方案没有自动完成问题。