我创建了一个使用标签框下拉的web应用程序。除了Chrome浏览器(Version 21.0.1180.89),这在所有浏览器中都很有效。

尽管输入字段和表单字段都有autocomplete="off"属性,Chrome坚持显示该字段以前条目的下拉历史,这是删除标签框列表。


当前回答

快速破解,如果你读了上面的答案仍然得到自动补全,你可以试试这个。给出随机字符串将删除自动补全。

<input autocomplete="somerandomstring" or autocomplete="disabled">

我不知道这方法对不对,它就是对我有用。

其他回答

在chrome v. 34之后,在<form>标记处设置autocomplete="off"不起作用

我做这些改变是为了避免这种恼人的行为:

删除密码输入的名称和id 在输入中放入一个类(例如:passwordInput)

(到目前为止,Chrome不会把保存的密码输入,但形式现在是破碎的)

最后,为了让表单工作,当用户点击提交按钮时,或者当你想触发表单提交时,运行以下代码:

var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");

在我的情况下,我曾经在密码输入中有id="password" name="password",所以我在触发提交之前把它们放回去。

我不得不在drupal页面上用一个巨大的webform来解决这个问题。因为我不能编辑每个输入的html代码,所以我想出了下面的通用jQuery解决方案。

<script>

    // Form Autocomplete FIX
    function is_mobile() {
        if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
            return true;
        }
        return false;
    }
    jQuery( 'input[autocomplete="off"]' ).each( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );
    jQuery( 'input[autocomplete="off"]' ).focus( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).removeAttr( 'readonly' );
        jQuery( this ).focus();
    } );
    jQuery( 'input[autocomplete="off"]' ).blur( function() {
        if( is_mobile() ) {
            return;
        }
        jQuery( this ).attr( 'readonly', true );
    } );

</script>

浏览器检测从这里开始。

我想有可能优化这段代码(我很想获得一些建议),但您将从中获得想法。

为了防止自动补全,只需设置一个空白作为输入值:

<input type="text" name="name" value="  ">

我提出了以下解决方案,查询所有字段的属性autocomplple ="off",然后将其值设置为一个单独的空间,然后设置一个约200ms的定时器,并将值设置回一个空字符串。

例子:

// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");

noFill.forEach(function(el) {
    el.setAttribute("value", " ");
    setTimeout(function() {
        el.setAttribute("value", "");
    }, 200);
});

我选择200毫秒作为计时器,因为经过一些实验,200毫秒似乎是我的电脑上chrome放弃尝试自动完成字段所需的时间。我很乐意听到其他时间对其他人来说似乎更好。

除了给它一个自动补全的假字段外,所有的解决方案都不起作用。我做了一个React组件来解决这个问题。

import React from 'react'

// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".

const DontBeEvil = () => (
  <div style={{ display: 'none' }}>
    <input type="text" name="username" />
    <input type="password" name="password" />
  </div>
)

export default DontBeEvil