Edge浏览器密码框自带眼睛图标偶现 如何禁用并自定义显隐图标

这个偶现的眼睛图标和Bootstrap 4、业务代码都没有关系，是微软Edge浏览器内置的原生密码显隐控件，属于浏览器默认自带的表单增强功能，所以才会只在Edge环境出现、Chrome无此现象。偶现是因为该控件的显示逻辑受浏览器表单自动填充状态、密码保存状态影响，不是代码层面主动渲染的元素。

直接通过CSS伪元素选择器隐藏Edge自带的相关控件即可，代码如下：

/* 隐藏Edge密码框原生眼睛图标、文本框原生清除按钮 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none !important;
}

禁用原生图标后，可以按照Bootstrap 4的布局规范实现自定义的显隐交互，参考实现如下：

• 调整HTML结构，预留图标位置

<div class="form-account-label-input position-relative">
   <label>Password <span class="star-red">&nbsp;*</span></label>
   <input type="password" id="Password" name="Password" class="w-100 pr-5">
   <!-- 自定义图标容器，可替换为项目使用的图标库（如Font Awesome、Iconfont、内嵌SVG均可） -->
   <span class="password-toggle-icon position-absolute" style="right: 12px; top: calc(1.5rem + 14px); cursor: pointer; color: #666;"></span>                               
</div>

注意给密码输入框加右内边距，避免输入的文字覆盖自定义图标，定位时注意对齐输入框垂直居中位置即可。

• 添加交互JS，实现类型切换和图标状态切换

const pwdInput = document.getElementById('Password');
const toggleIcon = document.querySelector('.password-toggle-icon');

// 初始化图标状态，默认密码密文对应隐藏密码的图标
toggleIcon.classList.add('icon-eye-close');

toggleIcon.addEventListener('click', function() {
  // 切换输入框type属性实现密文/明文切换
  const isPwd = pwdInput.type === 'password';
  pwdInput.type = isPwd ? 'text' : 'password';
  // 切换对应图标类名，根据自己项目的图标类名调整即可
  this.classList.toggle('icon-eye-close', !isPwd);
  this.classList.toggle('icon-eye-open', isPwd);
})

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