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


当前回答

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

其他回答

Chrome一直试图强制自动完成。所以你需要做一些事情。

输入字段的属性id和名称不需要是可识别的。所以没有姓名、电话、地址等值。

相邻的标签或div也需要不可识别。然而,您可能会想,用户如何知道?好吧,在使用内容后,您可以使用::做一个有趣的小技巧。你可以将其设置为字母。

<label>Ph<span class='o'></span>ne</label>
<input id='phnbr' name='phnbr' type='text'>

<style>
  span.o {
    content: 'o';
  }
</style>

我不得不对那些说要避免禁用自动完成的答案表示异议。

首先要指出的是,未在登录表单字段上显式禁用自动完成是PCI-DSS失败。此外,如果用户的本地计算机受到威胁,则攻击者可以轻松地获取任何自动完成的数据,因为这些数据存储在明文中。

当然,可用性是有争议的,但在哪些表单字段应该禁用自动完成功能,哪些表单字段不应该禁用自动填写功能时,存在一个非常好的平衡。

三个选项:

第一:

<input type='text' autocomplete='off' />

第二:

<form action='' autocomplete='off'>

第三个(JavaScript代码):

$('input').attr('autocomplete', 'off');

这是浏览器现在忽略的安全问题。浏览器使用输入名称识别和存储内容,即使开发人员认为信息是敏感的,不应存储。

在两个请求之间设置不同的输入名称将解决问题(但仍将保存在浏览器的缓存中,并且还会增加浏览器的缓存)。

要求用户激活或停用浏览器设置中的选项不是一个好的解决方案。该问题可以在后端解决。

这是解决办法。所有自动完成的元素都是使用如下隐藏输入生成的:

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

然后,服务器像这样处理后置变量:(Demo)

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

可以照常访问该值

echo $_POST['username'];

而且浏览器将无法从以前的请求或以前的用户那里建议信息。

即使浏览器更新其技术以忽略/尊重自动完成属性,这将继续有效。

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

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

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

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