如何特性检测Microsoft Edge密码输入框显示密码眼睛图标的可用性

安全阿岳

2026-9-25

Edge原生密码显示图标特性检测方案

核心逻辑完全基于DOM特性检测，不需要嗅探浏览器UA，可在DOMContentLoaded阶段准确判断是否存在原生reveal眼睛图标：

动态生成临时密码输入框挂载到文档流，触发浏览器初始化原生控件的Shadow DOM结构
查询输入框的开放Shadow Root内是否存在Edge自带的显示密码按钮特征
检测完成后自动清理临时元素，无页面残留

实现代码

document.addEventListener('DOMContentLoaded', () => {
  // 自执行函数完成特性检测
  const hasNativePasswordReveal = (() => {
    // 创建临时密码输入框
    const tempPwdInput = document.createElement('input');
    tempPwdInput.type = 'password';
    // 设为不可见不影响页面渲染
    tempPwdInput.style.cssText = 'position: absolute; opacity: 0; width: 0; height: 0; overflow: hidden;';
    document.body.appendChild(tempPwdInput);

    let detectResult = false;
    // 检查是否存在开放Shadow Root（Edge密码控件会注入开放Shadow DOM）
    if (tempPwdInput.shadowRoot) {
      // 匹配Edge reveal按钮的典型特征：part属性/aria-label标识
      const nativeRevealBtn = tempPwdInput.shadowRoot.querySelector(
        'button[part="reveal"], [aria-label*="显示密码"], [aria-label*="reveal password"]'
      );
      detectResult = !!nativeRevealBtn;
    }

    // 清理临时DOM
    document.body.removeChild(tempPwdInput);
    return detectResult;
  })();

  if (hasNativePasswordReveal) {
    // 原生图标存在，跳过自定义实现逻辑即可
  } else {
    // 原生图标不存在，执行自定义显示密码方案
  }
});