如何检测密码输入框的密码是否可见？寻求无复选框JS动画方案

核心思路：点击浏览器原生的::-ms-reveal图标时，浏览器会自动切换密码输入框的type属性（在password和text之间切换），我们不需要额外复选框，只需监听这个属性变化，就能区分密码可见/隐藏状态，进而触发对应动画。

为什么纯CSS方案行不通？ #

::-ms-reveal是浏览器内置伪元素，目前没有浏览器支持通过input:has(::-ms-reveal:active)这类写法，用伪元素的状态控制父元素样式。因此必须借助JavaScript监听属性变化来实现需求。

具体实现代码 #

HTML #

<form>
  <input type="password" placeholder="Type Password here!" class="password-input">
</form>

CSS #

::-ms-reveal {
  transform: scale(0.5);
}

.password-input {
  font-size: 1.5em;
  color: green;
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

.password-input:focus {
  font-size: 2em;
  color: red;
}

/* 密码可见时的样式/动画 */
.password-input.password-visible {
  color: yellow;
  transform: translateX(10px); /* 示例：输入框右移动画 */
}

/* 密码隐藏时的样式/动画 */
.password-input.password-hidden {
  color: green;
  transform: translateX(0);
}

JavaScript #

const passwordInput = document.querySelector('.password-input');

// 监听type属性变化的观察者实例
const typeObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'type') {
      if (passwordInput.type === 'text') {
        // 密码可见：切换样式类
        passwordInput.classList.add('password-visible');
        passwordInput.classList.remove('password-hidden');
      } else {
        // 密码隐藏：切换样式类
        passwordInput.classList.add('password-hidden');
        passwordInput.classList.remove('password-visible');
      }
    }
  });
});

// 启动监听：只监听type属性的变化
typeObserver.observe(passwordInput, {
  attributes: true,
  attributeFilter: ['type']
});

// 初始化状态：添加隐藏类
passwordInput.classList.add('password-hidden');

这个方案完全依赖浏览器原生的::-ms-reveal行为，无需额外DOM元素，符合简洁需求。MutationObserver是IE11及以上都支持的API，和::-ms-reveal的兼容性范围匹配。

内容的提问来源于stack exchange，提问作者j.heindel