隐藏文本输入框后如何阻止Chrome密码管理器弹窗？

针对你遇到的Chrome密码管理器误弹出提示的问题，以下是几个经过验证的可行方案：

• 给输入框设置精准的autocomplete属性
  Chrome的密码管理器会优先识别autocomplete属性判断输入框用途，仅用autocomplete="off"可能在新版本Chrome中失效，建议使用更具体的非凭据类属性，明确告知浏览器这是评论标题而非用户名：

  <input type="text" v-model="commentTitle" autocomplete="comment-title" />
  

  也可以用autocomplete="new-password"（Chrome会将其识别为非现有凭据输入框，不会触发保存提示），但更推荐语义化的comment-title。

• 给编辑器绑定独立的空表单
  浏览器会把页面内输入框默认关联到最近的表单，即使无显式表单也可能误判。给编辑器容器绑定一个隐藏的空表单，让输入框归属到这个无凭据的表单中：

  <!-- 评论编辑器组件 -->
  <div class="comment-editor" form="dummy-comment-form">
    <input type="text" v-model="commentTitle" />
    <textarea v-model="commentContent"></textarea>
    <button @click="submitComment">提交</button>
  </div>
  
  <!-- 页面根节点添加隐藏的空表单 -->
  <form id="dummy-comment-form" style="display: none;"></form>
  

• 隐藏前临时设置输入框为只读
  在触发编辑器隐藏前，先将输入框设为readonly，延迟几十毫秒再执行隐藏操作。Chrome检测到输入框为只读状态时，不会将其识别为可保存凭据的字段：

  // 提交成功后的回调逻辑
  handleSubmitSuccess() {
    // 临时设置输入框为只读
    this.titleReadOnly = true;
    // 延迟隐藏编辑器
    setTimeout(() => {
      this.$emit('hideEditor');
    }, 30);
  }
  

  对应模板中的输入框：

  <input type="text" v-model="commentTitle" :readonly="titleReadOnly" />
  

• 避免使用敏感的name属性值
  确保输入框的name属性不要用username、login、email这类易被识别为凭据字段的值，改用语义化名称：

  <input type="text" v-model="commentTitle" name="comment-title" />
  

优先尝试autocomplete属性和name属性修改，这两个方案最直接且无需额外逻辑；如果仍无效，再结合只读延迟隐藏的方法，基本可以彻底阻止Chrome的误触发提示。

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