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


当前回答

对于React,您可以尝试将此代码放在表单下面或密码输入上面,或者放在电子邮件和密码输入之间

export const HackRemoveBrowsersAutofill = () => (
  <>
    <input type="email" autoComplete="new-password" style={ { display: 'none' } } />
    <input type="password" autoComplete="new-password" style={ { display: 'none' } } />
  </>
)

示例之一:

<input type="email"/>
<HackRemoveBrowsersAutofill/>
<input type="password"/>

其他回答

正如其他人所说,答案是autocomplete=“off”。

然而,我认为有必要说明为什么在某些情况下使用此选项是一个好主意,因为对此问题和重复问题的一些答案表明,最好不要关闭此选项。

停止存储信用卡号的浏览器不应该留给用户。太多的用户甚至不会意识到这是一个问题。

在信用卡安全码字段上关闭它尤为重要。如本页所述:

“永远不要存储安全码……它的价值取决于这样一种假设,即提供安全码的唯一方法是从实体信用卡中读取安全码,以证明提供该安全码的人实际上持有该卡。”

问题是,如果是公共计算机(网吧、图书馆等),其他用户很容易窃取您的卡信息,甚至在您自己的计算机上,恶意网站也可能窃取自动完成的数据。

始终有效的解决方案

我用随机字符解决了与谷歌Chrome的无休止斗争。当您总是使用随机字符串呈现自动完成时,它将永远不会记住任何内容。

<input name="name" type="text" autocomplete="rutjfkde">

希望这对其他人有所帮助。

2022年更新:

Chrome做出了这一改进:autocomplete=“新密码”,这将解决这个问题,但我不确定,如果一段时间后Chrome再次将其更改为不同的功能。

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

我终于找到了一个纯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>

这就是:

函数turnOnPasswordStyle(){$('#inputpassword').attr('type',“password”);}<input-onput=“turnOnPasswordStyle()”id=“inputpassword”type=“text”>

我的解决方案是使用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”