如何阻止Chrome将记忆词输入字段识别为密码并提示更新？

我太懂你这个困扰了——明明是两步验证里的记忆词输入，Chrome却硬要把它当成新密码提示更新，既破坏用户体验，又容易让用户混淆。你试过的那些方法没起效，大概率是因为现在浏览器对密码字段的检测逻辑更严格了，单个autocomplete="off"已经拦不住它的“过度热心”。

给你几个标准且通用的解决方案，按推荐程度排序：

1. 用语义化命名+表单级autocomplete控制 #

浏览器会根据输入框的name属性和表单的整体标记来判断字段用途，所以咱们明确告诉它这些不是密码字段：

• 给第二步的整个表单设置autocomplete="off"，直接声明这个表单不需要自动填充或密码管理；
• 给每个记忆词输入框设置清晰的name（比如memorable-char-1），绝对别用password这类容易混淆的名称；
• 同时给每个输入框单独设置autocomplete="off"。

示例代码：

<form autocomplete="off" ng-submit="submitMemorableChars()">
  <input type="password" maxlength="1" size="1" name="memorable-char-1" autocomplete="off" placeholder="第m位">
  <input type="password" maxlength="1" size="1" name="memorable-char-2" autocomplete="off" placeholder="第n位">
  <input type="password" maxlength="1" size="1" name="memorable-char-3" autocomplete="off" placeholder="第o位">
  <button type="submit">验证</button>
</form>

2. 添加引导用的隐藏密码字段 #

之前你试过隐藏密码框但没效果，可能是因为没给它设置正确的autocomplete属性来“转移”浏览器的注意力。咱们添加一个移出视口的隐藏密码框，标记为用户已有的密码，让浏览器把它当成登录流程的一部分，忽略可见的记忆词输入框：

<!-- 隐藏的引导字段，绝对定位移出视口，避免影响布局 -->
<input type="password" 
       style="position: absolute; left: -9999px; top: -9999px;" 
       autocomplete="current-password" 
       name="existing-password">

<!-- 你的记忆词输入框保持不变 -->
<input type="password" maxlength="1" size="1" name="memorable-char-1" autocomplete="off">
<input type="password" maxlength="1" size="1" name="memorable-char-2" autocomplete="off">
<input type="password" maxlength="1" size="1" name="memorable-char-3" autocomplete="off">

这个方法是浏览器密码管理逻辑里的常用技巧，比单纯的display:none更可靠，因为有些浏览器会忽略完全隐藏的字段。

3. AngularJS提交时临时修改输入类型 #

因为你用的是$http异步提交，不是原生表单提交，可以在提交前临时把输入框类型改成text，提交完再改回password——这样浏览器在检测提交行为时，会认为这些是普通文本字段，不会触发密码更新提示：

$scope.submitMemorableChars = function() {
  // 临时切换输入框类型为text
  const charInputs = document.querySelectorAll('input[name^="memorable-char"]');
  charInputs.forEach(input => input.type = 'text');

  // 提交验证数据
  $http.post('your-api-endpoint', {
    char1: $scope.char1,
    char2: $scope.char2,
    char3: $scope.char3
  })
  .then(function(response) {
    // 验证通过，跳转到主页
    window.location.href = 'app.x.com/#/dashboard';
  })
  .finally(function() {
    // 无论成功失败，都改回password类型
    charInputs.forEach(input => input.type = 'password');
  });
};

这个方法有点小hack，但完全不会修改UI，用户输入时还是看不到字符，完美符合你的需求。

这些方法在Chrome、Firefox等主流浏览器都能生效，你可以先试试第一种语义化的方案，不行再用第二种或第三种。

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