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


当前回答

<input type="text" name="attendees" id="autocomplete-custom-append">

<script>
  /* AUTOCOMPLETE */

  function init_autocomplete() {

    if (typeof ($.fn.autocomplete) === 'undefined') {
      return;
    }
    // console.log('init_autocomplete');

    var attendees = {
      1: "Shedrack Godson",
      2: "Hellen Thobias Mgeni",
      3: "Gerald Sanga",
      4: "Tabitha Godson",
      5: "Neema Oscar Mracha"
    };

    var countriesArray = $.map(countries, function (value, key) {
      return {
        value: value,
        data: key
      };
    });

    // initialize autocomplete with custom appendTo
    $('#autocomplete-custom-append').autocomplete({
      lookup: countriesArray
    });

  };
</script>

其他回答

截至2019年12月:

在回答这个问题之前,让我说,我在SO和不同论坛上尝试了几乎所有的答案,但没有找到适用于所有现代浏览器和IE11的解决方案。

这是我找到的解决方案,我相信这篇文章中还没有讨论或提及。

根据Mozilla开发网络(MDN)关于如何关闭表单自动完成的帖子

默认情况下,浏览器会记住用户通过网站上的字段提交的信息。这使浏览器能够提供自动补全(即,为用户已开始键入的字段建议可能的补全)或自动填充(即,在加载时预先填充某些字段)

在同一篇文章中,他们讨论了自动完成属性的用法及其限制。正如我们所知,并不是所有的浏览器都按照我们的意愿来尊重这个属性。

解决方案

所以在文章的最后,他们分享了一个适用于所有浏览器的解决方案,包括IE11+Edge。它基本上是一个jQuery插件。这里是jQuery插件的链接及其工作原理。

代码段:

$(document).ready(function () {        
    $('#frmLogin').disableAutoFill({
        passwordField: '.password'
    });
});

在HTML中需要注意的是,密码字段的类型为文本,并应用密码类来标识该字段:

<input id="Password" name="Password" type="text" class="form-control password">

希望这能对某人有所帮助。

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

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

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

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

除了设置autocomplete=off之外,您还可以通过生成页面的代码随机化表单字段名称,或者在名称末尾添加一些特定于会话的字符串。

提交表单后,您可以在服务器端处理表单之前剥离该部分。这将阻止web浏览器查找字段的上下文,也可能有助于防止XSRF攻击,因为攻击者无法猜测表单提交的字段名称。

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

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'
      ... 
    />

如果您的问题是自动填写密码字段,那么您可能会发现这很有用。。。

我们在网站的几个领域遇到了这个问题,在这些领域中,业务部门希望重新查询用户的用户名和密码,特别是出于合同原因,不希望自动填充密码。我们发现,最简单的方法是输入一个假密码字段,以便浏览器查找和填充,而真实密码字段保持不变。

<!-- 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),以使其“咬”。我使用了一个类来实现样式,而不是使用嵌入样式,所以如果由于某种原因,上面的方法不起作用,请尝试这样做。