Angular Materials：您可以禁用输入的自动完成建议吗？

Question

我只是使用像这样的简单输入容器

<md-input-container class="md-block" flex-gt-sm >
    <label>Name</label>
    <input md-maxlength="30" name="name" ng-model="name" />
</md-input-container>

输入字段建议之前输入的值，这模糊了一些重要的界面元素，而且在我的情况下也确实没有必要。有什么办法可以禁用这些建议吗？

Answer 1

将 autocomplete="off" 添加到输入元素，就像这样：

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

请参阅此供您参考。

Answer 2

对于没有 name 属性的输入，或将其值设置为自动填充功能常用的输入（名称、电子邮件、街道、国家/地区...），浏览器通常会忽略 autocomplete="off"。

就我而言，将输入设置为一个不寻常的名称就足够了。

<input type="text" name="someUnusualName" autocomplete="off">

Answer 3

将 autocomplete="off" 添加到输入中，但对于现代浏览器，请使用 autocomplete="nope"

旧版浏览器

<input md-maxlength="30" name="name" ng-model="name" autocomplete="off" />

现代浏览器

<input md-maxlength="30" name="name" ng-model="name" autocomplete="nope" />

Answer 4

以防万一有人和我有同样的经历（因为当前的答案在我的 Chrome 上不起作用），我使用了如下所示的方法并且它有效：

<input md-maxlength="30" name="name" ng-model="name" autocomplete="new-password" />

Answer 5

新浏览器似乎会查看 id 字段或名称字段来确定您要通过自动填充查找的内容。当我想关闭自动填充功能时，我开始倒着拼写。

问题标签 - 自动填充弹出窗口

<input id='cp_state_i' required />

修复 - 不自动填充弹出窗口

<input id='cp_etats_i' required />

我的问题是我正在使用州的自动完成选项列表。弹出窗口是一个问题。这是我的修复，可能对你有帮助。

似乎在某些文本字段上起作用的另一件事是这个

<input autocomplete='new-password'/>

我删除 type='text 并且它会停止弹出内容。但无论出于何种原因，它并不能对所有事情都起作用，只是对某些事情起作用。

我不确定为什么浏览器不再支持 autocomplete='off' 。除了简单的登录表单之外，在处理 CRUD 和其他合理操作时，它会带来一些麻烦。

Answer 6

<input type="text" id="example" placeholder="" matInput  [(ngModel)]="item.productDescription" [matAutocomplete]="product" [matAutocompleteDisabled]="condition"/>

只需在有效条件下使用 [matAutocompleteDisabled] 属性即可。

Answer 7

只需使用输入

type="search"

就可以了。在 Google Chrome 版本 92.0.4515.107（官方版本）（arm64）上测试

例如：

<input type="search" name="namesearch" id="search-cust" placeholder="Shop Name" style="width:170px" />

Answer 8

对于现代浏览器，以下内容应该有效：

Answer 9

对于现代浏览器和最新更新，您可以将这两个属性

autocomplete="false"

和

role="presentation"

添加到您的输入中。