表单字段已设autocomplete="off"仍有浏览器自动提示，如何解决？

我太懂这种糟心的情况了——明明给输入框加了autocomplete="off"，浏览器还是自顾自弹出历史输入的提示框，完全不听使唤！这是因为现在主流浏览器（比如Chrome、Edge）为了提升用户体验，会忽略普通输入字段的autocomplete="off"属性，尤其是当字段的name/id属于常见命名（比如"name"、"car-name"这类）的时候。

给你几个亲测有效的解决方案，按优先级试试：

• 用autocomplete="new-password"替代off：这个属性原本是为密码字段设计的，用来避免浏览器自动填充旧密码，但现在大多数浏览器对普通文本输入也生效，因为它不会匹配任何历史输入的自动提示规则。修改后的输入框代码：

  <input type="text" class="form-control" placeholder="" id="name-of-car-id" autocomplete="new-password">
  

• 设置独一无二的name和id：浏览器是根据输入框的name/id来匹配历史输入记录的，如果你用一个非常独特的命名（比如不要用"name-of-car-id"，改成"custom-car-group-identifier-xyz"），浏览器就找不到对应的历史记录，自然不会弹出提示：

  <input type="text" class="form-control" placeholder="" id="custom-car-group-identifier-xyz" name="custom-car-group-identifier-xyz" autocomplete="off">
  

• 结合readonly和JavaScript：让输入框默认处于只读状态，当用户点击它的时候再移除readonly属性。浏览器不会对只读字段进行自动填充，这样就能绕过自动提示：

  <input type="text" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off" readonly onclick="this.removeAttribute('readonly');">
  

• 给整个表单加上autocomplete="off"：如果上面的方法都不行，试试在包裹这个输入框的<form>标签上也加上autocomplete="off"，有些浏览器会优先识别表单级别的设置。

修改后的完整代码片段示例（用第一种方案）：

<div class="form-group">
    <h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
    <input type="text" class="form-control" placeholder="" id="name-of-car-id" autocomplete="new-password">
    <span id='remainingC'></span>
    <small class="form-text text-muted">You will identify your group of IDs by this name</small>
    <div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>

内容的提问来源于stack exchange，提问作者ProcolHarum