如何在jQuery中切换密码框类型？解决after元素绑定难题实现密码显隐

嘿，这个问题挺常见的——毕竟伪元素不是真实的DOM节点，确实没法直接给它们绑定事件。不过咱们可以利用事件冒泡和伪元素的宿主元素来间接实现这个功能，具体思路和代码如下：

核心原理 #

伪元素是依附于它的宿主元素（比如包裹输入框的容器）渲染出来的，点击伪元素时，事件会冒泡到它的宿主元素上。所以我们只需要给宿主元素绑定点击事件，再通过判断点击区域来触发密码显隐的逻辑就行。

完整实现代码 #

HTML

<div class="password-wrap">
  <input type="password" id="pwd-input" placeholder="输入密码">
</div>

CSS

.password-wrap {
  position: relative;
  display: inline-block;
}

/* 伪元素样式：放在输入框右侧 */
.password-wrap:after {
  content: "see";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  cursor: pointer;
  /* 关键：让伪元素不拦截点击事件，点击它会直接触发宿主元素的点击 */
  pointer-events: none;
}

/* 根据输入框状态切换伪元素文本 */
.password-wrap[data-mode="show"]:after {
  content: "hide";
}

JavaScript

const passwordWrap = document.querySelector('.password-wrap');
const pwdInput = document.getElementById('pwd-input');

passwordWrap.addEventListener('click', (e) => {
  // 只有点击伪元素区域时才触发（点击输入框本身不触发）
  if (e.target === passwordWrap) {
    // 切换输入框类型
    const newType = pwdInput.type === 'password' ? 'text' : 'password';
    pwdInput.type = newType;
    // 更新宿主元素的data属性，用来切换伪元素文本
    passwordWrap.dataset.mode = newType === 'text' ? 'show' : 'hide';
  }
});

关键细节说明 #

1. pointer-events: none：这个CSS属性让伪元素不再拦截点击事件，点击伪元素的区域时，事件会直接传递给宿主元素（.password-wrap），这样我们就能通过宿主元素的点击事件来响应伪元素的点击。
2. 区分点击区域：通过e.target === passwordWrap判断，确保只有点击伪元素区域时才触发切换，点击输入框本身不会触发，符合用户的交互预期。
3. 状态同步：利用宿主元素的data-mode属性，配合CSS动态切换伪元素的文本（从"see"变成"hide"），让交互更直观。

这样就能完美实现点击伪元素来切换密码显示隐藏的功能啦！

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