Chrome浏览器自动填充建议遮挡Bootstrap typeahead提示项如何解决

解决方案 #

Chrome近期更新调整了自动填充规则，原有autocomplete="new-password"的配置已经无法绕过填充检测，可通过以下几种方案关闭自带填充建议：

• 方案1：替换为Chrome无法识别的autocomplete值
  不要使用off/new-password/username这类Chrome已收录的属性值，替换为自定义无意义值即可触发Chrome的忽略逻辑：

  <input type="text" id="your-typeahead-input" autocomplete="do-not-autofill">
  

• 方案2：添加只读属性兼容全版本浏览器
  页面加载时将输入框设为只读，聚焦后再移除只读属性，避免Chrome在页面初始化阶段识别到输入框触发填充逻辑：

  <input type="text" id="your-typeahead-input" readonly onfocus="this.removeAttribute('readonly');" autocomplete="do-not-autofill">
  

  jQuery版本实现：

  $('#your-typeahead-input').attr('readonly', true).on('focus', function() {
    $(this).attr('readonly', false);
  });
  

• 方案3：添加隐藏假输入框承接填充逻辑
  在真实输入框前插入两个隐藏的账号密码输入框，让Chrome的自动填充逻辑落到隐藏元素上，不会干扰真实输入框：

  <!-- 隐藏填充承接节点 -->
  <input type="text" style="display:none">
  <input type="password" style="display:none">
  <!-- 真实typeahead输入框 -->
  <input type="text" id="your-typeahead-input" autocomplete="do-not-autofill">
  

• 方案4：额外调整输入框name属性
  如果以上方案仍不生效，可以将输入框的name属性设置为无意义值，避免Chrome通过字段名识别输入框用途触发填充，比如不要用search/query/keyword这类常用命名。

内容的提问来源于stack exchange，提问作者Jürgen Kicherer