始终有效的解决方案

我用随机字符的使用解决了谷歌Chrome无休止的战斗。当你总是用随机字符串渲染自动补全时，它永远不会记住任何东西。

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

希望对其他人有所帮助。

2022年更新:

Chrome做了这个改进:autocomplete="new-password"这将解决它，但我不确定，如果Chrome在一段时间后再次更改为不同的功能。

现代的方法

简单地使你的输入为只读，然后聚焦，删除它。这是一种非常简单的方法，浏览器不会填充只读输入。因此，此方法被接受，并且永远不会被将来的浏览器更新覆盖。

<input type="text" onfocus="this.removeAttribute('readonly');" readonly />

下一部分是可选的。相应地设置输入样式，使其看起来不像只读输入。

input[readonly] {
     cursor: text;
     background-color: #fff;
}

工作示例

Chrome一直在改变它在每个版本上处理自动完成的方式，我提出的方式是，使字段只读和onclick/focus使它非只读。试试这个jQuery片段。

jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload

 $('input, :input').on( 'click focus', function(){ //on input click
 $('input, :input').attr('readonly',true);//make other fields readonly
 $( this ).attr('readonly',false);//but make this field Not readonly
 });
//======./fix for autocomplete
});

除了给它一个自动补全的假字段外，所有的解决方案都不起作用。我做了一个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

我不得不在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>

浏览器检测从这里开始。

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

这些方法都不再工作，chrome忽略所有这些属性，唯一的解决方案是使用jquery

在输入上使用这个

< onclick输入=“$”.removeAttr(readonly);attr(“readonly”，true);“readonly />