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

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


当前回答

我在我的表单中的一个搜索字段也有类似的问题。无论是autocomplete= "false"还是autocomplete= "off"都不适合我。结果是,当你有aria-label属性在输入元素是设置为一些像城市或地址或类似的东西,chrome覆盖你所有的设置和显示自动完成无论如何

所以修复我所做的是从aria标签中删除城市部分,并提出一个不同的值。最后自动完成停止显示

其他回答

我遇到过类似的问题,输入字段要么取名字,要么取电子邮件。我设置autocomplete=“关闭”,但Chrome仍然强制建议。事实证明,这是因为占位符文本中有“姓名”和“电子邮件”这两个词。

例如

<input type="text" placeholder="name or email" autocomplete="off" />

我通过在占位符中的单词中放入零宽度的空格来解决这个问题。没有更多的Chrome自动完成。

<input type="text" placeholder="nam&#8203;e or emai&#8203;l" autocomplete="off" />

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

浏览器检测从这里开始。

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

Autocomplete =off在现代浏览器中基本上被忽略了——主要是由于密码管理器等。

你可以尝试添加这个autocomplete="new-password",它不是所有浏览器都完全支持,但在一些浏览器上是有效的

对我来说,在表单和输入中设置autocomplete=“off”是有效的。但可以是片状的。有时它会建议密码或一些保存的登录名+密码选项。但不要提前预约。

Chrome版本:81.0.4044.138

CodePen

<表单角色=“表单” 方法=“发布” 操作=“#” 自动完成=“关闭”> <标签=“登录”>登录</label><br/> <输入类型=“文本” 名称=“登录” id=“登录” 自动完成=“关闭” /> <br/><br/> <标签=“密码”>密码</label><br/> <输入类型=“密码” 名称=“密码” 自动完成=“关闭” /> <br/><br/> <输入类型=“提交” 名称=“提交” 值=“提交” /> </form>

其他选项:

删除'form'标签…或者在提交之前将其从'div'更改为'form'。 用javascript和一些contentteditable ="true"字段可以让你的方式…

通常每隔几个月我就得另找工作。

始终有效的解决方案

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

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

希望对其他人有所帮助。

2022年更新:

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