使用JSF/PrimeFaces实现密码显示/隐藏功能失效求助

核心问题分析 #

1. PrimeFaces客户端ID重写：PrimeFaces的<p:inputText>组件会根据父表单生成带命名空间的客户端ID（例如表单ID:productadminpassword），直接用#productadminpassword无法匹配到实际DOM元素，导致事件绑定失败。
2. 脚本执行时机过早：如果脚本在DOM元素完全加载前执行，querySelector会返回null，无法完成事件绑定。
3. 图标类切换不完整：原脚本仅添加bi-eye类，但未移除bi-eye-slash，导致图标显示异常。

解决方案 #

方案1：使用属性选择器匹配ID后缀

通过[id$="元素ID"]选择器匹配PrimeFaces生成的客户端ID，同时完善图标类切换逻辑：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配ID以productadminpassword结尾的输入框
  const password = document.querySelector('[id$="productadminpassword"]');
  // 匹配ID以togglePassword结尾的图标
  const togglePassword = document.querySelector('[id$="togglePassword"]');

  if (togglePassword && password) {
    togglePassword.addEventListener('click', function () {
      // 切换输入框类型
      const newType = password.getAttribute('type') === 'password' ? 'text' : 'password';
      password.setAttribute('type', newType);
      // 切换图标类
      this.classList.toggle('bi-eye');
      this.classList.toggle('bi-eye-slash');
    });
  }
});

方案2：利用PrimeFaces widgetVar获取组件

给<p:inputText>添加widgetVar属性，直接通过PrimeFaces API获取输入框DOM元素：

<p:inputText id="productadminpassword" widgetVar="passwordWidget" required="true"
    value="#{ApplicationManagedBean24.saveRequestMap['Object::MasterPassword']}"
    styleClass="inputField border" style="width:300px;"
    requiredMessage="Admin Password is mandatory"
    type="password">
    <p:ajax event="change" process="@this"
        update="@([id$=Adminpasswordcheck]) @([id$=prodeletepassword])"
        onstart="AdminpasswordMessageRemove();" />  
</p:inputText>

对应的脚本：

$(document).ready(function() {
  const togglePassword = document.querySelector('[id$="togglePassword"]');
  // 通过widgetVar获取输入框DOM元素
  const password = PF('passwordWidget').getInput()[0];

  togglePassword.addEventListener('click', function () {
    const newType = password.getAttribute('type') === 'password' ? 'text' : 'password';
    password.setAttribute('type', newType);
    this.classList.toggle('bi-eye');
    this.classList.toggle('bi-eye-slash');
  });
});

方案3：调整脚本位置

将脚本代码放在页面最底部（</body>标签之前），确保DOM元素已加载完成后再执行脚本，避免querySelector返回null。

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