如何阻止Microsoft Edge浏览器的输入建议弹窗？

即使设置了autocomplete="off"、绑定空list属性，Edge浏览器仍会在输入框输入内容时弹出“来自已保存信息的结果”的建议弹窗，可尝试以下几种方案彻底关闭该弹窗：

• 替换autocomplete属性值为none
  部分浏览器对autocomplete="off"的解析存在兼容问题，改用autocomplete="none"能更明确地告知浏览器禁止所有自动填充和建议行为：

  <input id="input-guess" 
          type="text"
          bind:value={guess} 
          spellcheck="true" 
          placeholder={$t('common.enter_a_word')}
          autocomplete="none" />
  

• 结合readonly属性与聚焦事件
  给输入框默认添加readonly属性，让浏览器认为该输入框不可编辑，不会触发自动建议；当用户聚焦输入框时，通过JS移除readonly属性，不影响正常输入：

  <input id="input-guess" 
          type="text"
          bind:value={guess} 
          spellcheck="true" 
          placeholder={$t('common.enter_a_word')}
          autocomplete="off"
          readonly
          onfocus="this.removeAttribute('readonly')" />
  

• 变通使用autocomplete="new-password"
  浏览器对new-password属性的处理逻辑是完全禁止自动填充和建议，即便不是密码输入框也可使用该属性强制关闭弹窗（注意语义上的合理性，适合对语义要求不高的场景）：

  <input id="input-guess" 
          type="text"
          bind:value={guess} 
          spellcheck="true" 
          placeholder={$t('common.enter_a_word')}
          autocomplete="new-password" />
  

• CSS隐藏Edge特定弹窗元素
  通过CSS针对Edge的自动填充相关按钮和弹窗样式进行隐藏（该方法可能随浏览器版本更新失效，作为备选方案）：

  /* 隐藏Edge的清除/显示按钮 */
  input::-ms-clear, input::-ms-reveal {
      display: none;
  }
  /* 隐藏自动填充建议触发按钮 */
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button {
      visibility: hidden;
      pointer-events: none;
      position: absolute;
      right: 0;
  }
  

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