Chrome浏览器中密码框显示密码眼睛图标不可见问题咨询

• 核心原因：Edge浏览器原生内置了密码输入框的显示/隐藏密码控件，而Chrome及部分其他浏览器默认不提供该原生功能，因此需要手动实现或借助框架组件来添加一致的交互效果。

原生HTML+TypeScript手动实现方案 #

通过自定义图标绑定切换逻辑，实现跨浏览器一致的密码显示/隐藏功能：

调整HTML结构 #

<div class="password-input-group">
  <input type="password" class="form-control input-left" formControlName="currentPassword" placeholder="Current Password" aria-describedby="basic-addon1" />
  <button type="button" class="toggle-password" aria-label="Toggle password visibility">
    <span>👁️</span>
  </button>
</div>

添加CSS布局样式 #

让图标定位在输入框右侧内部：

.password-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.toggle-password {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

编写TypeScript交互逻辑 #

绑定点击事件切换输入框的类型：

const passwordInput = document.querySelector('input[formControlName="currentPassword"]') as HTMLInputElement;
const toggleBtn = document.querySelector('.toggle-password') as HTMLButtonElement;

toggleBtn.addEventListener('click', () => {
  const isPassword = passwordInput.type === 'password';
  passwordInput.type = isPassword ? 'text' : 'password';
  // 切换图标状态
  toggleBtn.innerHTML = isPassword ? '<span>👁️‍🗨️</span>' : '<span>👁️</span>';
});

Angular框架适配方案（适配你的formControlName场景） #

如果是Angular项目，可直接使用Angular Material组件快速实现，无需手动编写大量逻辑：

（可选）安装Angular Material #

ng add @angular/material

使用带切换功能的密码输入组件 #

<mat-form-field class="password-input-group">
  <input matInput [type]="hidePassword ? 'password' : 'text'" formControlName="currentPassword" placeholder="Current Password">
  <button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" aria-label="Toggle password visibility">
    <mat-icon>{{hidePassword ? 'visibility' : 'visibility_off'}}</mat-icon>
  </button>
</mat-form-field>

组件内TypeScript逻辑 #

hidePassword = true;

以上两种方案都能让Chrome和Edge浏览器显示一致的密码切换图标，保证跨浏览器交互体验统一。

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