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


当前回答

提供的答案在我测试的所有浏览器上都不起作用。基于已经提供的答案,这是我最终在Chrome 61、Microsoft Edge 40(EdgeHTML 15)、IE 11、Firefox 57、Opera 49和Safari 5.1上测试的结果。由于多次试验,它很古怪;然而,它确实对我有用。

<form autocomplete="off">
    ...
    <input type="password" readonly autocomplete="off" id="Password" name="Password" onblur="this.setAttribute('readonly');" onfocus="this.removeAttribute('readonly');" onfocusin="this.removeAttribute('readonly');" onfocusout="this.setAttribute('readonly');" />
    ...
</form> 

<script type="text/javascript">
    $(function () {           
        $('input#Password').val('');
        $('input#Password').on('focus', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keyup', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
    $('input#Password').on('keydown', function () {
        if (!$(this).val() || $(this).val().length < 2) {
            $(this).attr('type', 'text');
        }
        else {
            $(this).attr('type', 'password');
        }
    });
</script>

其他回答

<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>
<form name="form1" id="form1" method="post"
      autocomplete="off" action="http://www.example.com/form.cgi">

这将在Internet Explorer和Mozilla Firefox中运行。缺点是它不是XHTML标准。

我的解决方案是使用angular js指令动态更改文本输入类型它就像魅力一样

首先添加2个隐藏文本字段

然后添加一个像这样的角度指令

 (function () {

    'use strict';

    appname.directive('changePasswordType', directive);

    directive.$inject = ['$timeout', '$rootScope',  '$cookies'];

    function directive($timeout,  $rootScope, $cookies) {
        var directive = {
            link: link,
            restrict: 'A'
        };

        return directive;

        function link(scope,element) {
            var process = function () {
                var elem =element[0];
                elem.value.length > 0 ? element[0].setAttribute("type", "password") :
                element[0].setAttribute("type", "text");
            }

            element.bind('input', function () {
                process();
            });

            element.bind('keyup', function () {
                process();
            });
        }
    }
})()

然后在需要阻止自动完成的文本字段中使用它

    <input type="text" style="display:none">\\can avoid this 2 lines
    <input type="password" style="display:none">
    <input type="text"  autocomplete="new-password" change-password-type>

注意:不要忘记包含jquery,并在开始时设置type=“text”

我刚刚遇到了这个问题,并尝试了几次失败,但这一次对我有效(在MDN上找到):

在某些情况下,浏览器将继续建议自动完成值即使autocomplete属性设置为off。这是意外的对于开发人员来说,这种行为可能非常令人困惑。真正的诀窍强制无完成是将随机字符串分配给属性像这样:

autocomplete="nope"

大多数主要浏览器和密码管理器(正确地说,IMHO)现在都忽略了autocomplete=off。

为什么?许多银行和其他“高安全性”网站“出于安全目的”在其登录页面中添加了autocomplete=off,但这实际上降低了安全性,因为这会导致人们更改这些高安全性网站上的密码,以便于记忆(从而破解),因为自动完成功能已被破坏。

很久以前,大多数密码管理器开始忽略autocomplete=off,现在浏览器开始只对用户名/密码输入执行相同的操作。

不幸的是,自动完成实现中的错误会将用户名和/或密码信息插入到不适当的表单字段中,从而导致表单验证错误,或者更糟的是,意外地将用户名插入到用户故意留空的字段中。

web开发人员应该做什么?

如果您可以单独保存页面上的所有密码字段,这是一个很好的开始,因为密码字段的存在似乎是用户/密码自动完成的主要触发因素。否则,请阅读下面的提示。Safari注意到有两个密码字段,并在这种情况下禁用自动完成,假设它必须是一个更改密码表单,而不是登录表单。因此,请确保在允许的任何表单中使用两个密码域(新的和确认新的)不幸的是,Chrome34每当看到密码字段时,都会尝试使用user/pass自动填充字段。这是一个非常糟糕的bug,希望他们会改变Safari的行为。但是,将其添加到表单顶部似乎会禁用密码自动填充:<input-type=“text”style=“display:none”><input-type=“password”style=“display:none”>

我还没有彻底调查IE或Firefox,但如果其他人在评论中有信息,我很乐意更新答案。