Webauthn条件UI适配问题：桌面浏览器无法识别包含三个值的autocomplete属性

这个问题确实挺棘手的——既要照顾大多数用户习惯的邮箱/手机号自动填充，又要给有Passkey的用户提供无感知的Conditional UI触发，结果桌面Chromium内核浏览器（Arc、Chrome）还卡了三值autocomplete的兼容坑，太闹心了😂

先理清楚问题根源 #

目前桌面端的Chromium内核浏览器（包括你用的Arc，基于Chromium 131）对autocomplete属性的多值组合支持有局限性：当同时指定三个值（email tel-national webauthn）时，浏览器会优先识别前两个，直接忽略webauthn标识，导致Conditional UI无法触发。而移动端Chrome做了兼容优化，所以能正常识别。

给你几个可行的解决方案，都能兼顾现有需求 #

方案1：用隐藏辅助Input单独承载WebAuthn标识（最推荐）

核心思路是把「邮箱/手机号自动填充」和「Passkey Conditional UI」拆到两个Input上，主Input保留用户熟悉的email tel-national，再用一个隐藏的Input专门处理webauthn。这样既不影响老用户的自动填充体验，又能让桌面浏览器识别到Passkey的Conditional UI触发条件。

注意：不能用display: none隐藏辅助Input，浏览器会忽略这类不可见元素的autocomplete属性，要用绝对定位把它移出可视区域：

<!-- 主输入框：处理邮箱/手机号的自动填充，保留原有交互 -->
<input 
  type="text" 
  autocomplete="email tel-national" 
  placeholder="输入邮箱或手机号"
  id="main-login-input"
/>

<!-- 隐藏的辅助输入框：专门触发WebAuthn Conditional UI -->
<input 
  type="text" 
  autocomplete="webauthn" 
  id="webauthn-helper-input"
  style="
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  "
  aria-hidden="true"
/>

然后在JavaScript里，你需要把WebAuthn的Conditional UI逻辑和这个隐藏Input绑定。比如调用navigator.credentials.get()时，指定mediation: 'conditional'：

// 页面加载后初始化Passkey Conditional UI
async function initPasskeyConditionalUI() {
  const helperInput = document.getElementById('webauthn-helper-input');
  if (!helperInput) return;

  try {
    const credential = await navigator.credentials.get({
      publicKey: {
        rpId: window.location.hostname,
        allowCredentials: [], // 空数组表示允许发现所有关联的Passkey
        userVerification: 'preferred'
      },
      mediation: 'conditional',
      signal: AbortSignal.timeout(30000)
    });

    // 如果获取到Passkey，自动完成登录流程
    if (credential) {
      console.log('使用Passkey登录:', credential);
      // 这里添加把凭证发送给后端验证的逻辑
    }
  } catch (err) {
    // 没有Passkey或者用户取消，不影响主输入框的使用
    console.log('Passkey不可用或用户取消:', err);
  }
}

// 页面加载完成后初始化
window.addEventListener('load', initPasskeyConditionalUI);

这个方案的好处是完全不改变现有用户的操作习惯，桌面端浏览器会自动识别隐藏Input的webauthn属性，只有当存在已保存的Passkey时才会弹出Conditional UI提示，否则不会干扰用户输入邮箱/手机号。

方案2：动态切换autocomplete属性（备选）

如果不想加额外的Input，可以尝试在页面加载时，先静默检测是否有已保存的Passkey，再动态调整主Input的autocomplete属性：

async function checkPasskeyExists() {
  try {
    // 静默检测是否有可用的Passkey
    const result = await navigator.credentials.get({
      publicKey: {
        rpId: window.location.hostname,
        allowCredentials: [],
        userVerification: 'discouraged'
      },
      mediation: 'silent'
    });
    return !!result;
  } catch (err) {
    return false;
  }
}

// 页面加载时检测并调整autocomplete
window.addEventListener('load', async () => {
  const mainInput = document.getElementById('main-login-input');
  const hasPasskey = await checkPasskeyExists();
  
  if (hasPasskey) {
    // 如果有Passkey，切换为双值组合（比如email + webauthn）
    mainInput.setAttribute('autocomplete', 'email webauthn');
  } else {
    // 没有Passkey，保留原有的email + tel-national
    mainInput.setAttribute('autocomplete', 'email tel-national');
  }
});

不过这个方案有个小缺点：如果用户之后在其他设备上保存了Passkey，当前页面刷新前不会触发Conditional UI，而且只能二选一保留一个邮箱/手机号的autocomplete标识，可能会影响其中一类用户的自动填充体验。

最后补充测试要点 #

• 测试桌面端Arc/Chrome时，记得清除浏览器缓存或者用隐私窗口测试，避免之前的autocomplete缓存干扰结果。
• 隐藏Input的样式要确保它完全不可见，但又不是display: none或者visibility: hidden，否则浏览器会忽略它的autocomplete属性。

希望这些方案能帮你解决问题，兼顾现有用户和Passkey的新需求！

备注：内容来源于stack exchange，提问作者alexxchela