解决带onfocus动画的输入框中密码切换span的onclick失效问题

核心问题原因 #

密码切换图标点击无响应，本质是图标被上层元素遮挡：

• 聚焦状态的表单标签.form-label设置了z-index:10，层级高于未设置z-index的图标
• 图标通过margin-top: -40px偏移定位，未脱离文档流，容易被输入框或标签覆盖

完整修复方案 #

1. 修正CSS，确保图标可点击 #

修改.show-password-icn样式，改用绝对定位并提升层级：

.show-password-icn {
    font-size: 22px !important; /* 补全缺失的px单位 */
    position: absolute;
    top: 18px; /* 垂直居中对齐输入框 */
    right: 30px; /* 右侧固定定位 */
    color: #767676;
    cursor: pointer; /* 提示可点击 */
    z-index: 20; /* 高于标签的z-index:10，确保点击区域不被遮挡 */
}

父容器.inputfield已设置position: relative，绝对定位的图标会相对于它定位，不影响其他布局。

2. 修复JS的图标类切换逻辑 #

原代码仅添加新图标类，未移除旧类，导致图标显示异常：

$(document).on('click', '.toggle-password', function() {
  // 同时切换两个图标类
  $(this).toggleClass("ion-md-eye ion-md-eye-off");
  var input = $("#Password");
  // 切换密码输入框的可见性
  input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password');
});

3. 修正图标引入错误 #

原代码用<script>标签引入CSS文件，这是错误的，替换为正确的链接：

<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">

4. 优化HTML结构（可选） #

移除冗余的<br>标签，保持结构简洁：

<div class="col-3 inputfield">
  <input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
  <label class="form-label">New Password</label>
  <div class="input-group-append custom">
    <span toggle="#Password" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
  </div>
</div>

关键注意点 #

• 交互元素必须保证层级足够高（通过z-index），避免被其他元素遮挡点击区域
• 类切换时要同时处理状态相反的类，确保UI显示正确
• 给可点击元素添加cursor: pointer能明确提示用户该区域可交互

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