将Primefaces密码验证：<p:password>和显示/隐藏文本/密码图标结合在一起

Question

我正在尝试使用p:password在Primefaces中设置密码验证，我还需要添加显示密码眼图标。

我需要像下面的图片，显示或隐藏文本/密码时，用户单击光标。

​

​

PRIMEFACES JSF代码：

    <h:outputLabel for="pwd1" value="Password:  " />
    <p:password  styleClass="Wid40" id="pwd1" value="#mybean.password1}" match="pwd2" 
                 label="Password:" required="true" placeholder="Password" > 
        <button type="button" onclick="checkPassPwd1()" ><i class="show-pass fa fa-eye fa-lg"></i></button>
    </p:password> 

    <h:outputLabel for="pwd2" value="Repeat Password:  " />         
    <p:password  styleClass="Wid40" id="pwd2" value="#{mybean.password2}" 
                required="true" placeholder="Password" > 

    <button type="button" onclick="checkPassPwd2()" ><i class="show-pass fa fa-eye fa-lg"></i></button> 
   </p:password>      

JAVASCRIPT代码：

function checkPassPwd1() {
    var obj=document.getElementById('pwd1');
    var c=obj.nextElementSibling
    if (ojb.getAttribute('type') == "password") {
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye");
        obj.removeAttribute("type");
        obj.setAttribute("type","text");
    } else {
        ojb.removeAttribute("type");
        obj.setAttribute('type','password');
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye-slash");
    }
}


function checkPassPwd2() {
    var obj=document.getElementById('pwd2');
    var c=obj.nextElementSibling
    if (ojb.getAttribute('type') == "password") {
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye");
        obj.removeAttribute("type");
        obj.setAttribute("type","text");
    } else {
        ojb.removeAttribute("type");
        obj.setAttribute('type','password');
        c.removeAttribute("class");
        c.setAttribute("class","fas fa-eye-slash");
   }
}

我不知道如何使用javascript和p:password将文本更改为密码，也不知道如何在用户单击图标时启用/禁用显示传递和隐藏传递图标。

Answer 1

它要简单得多，您不需要删除属性，只需更改它。使用JQuery。在下面的示例中，您的pwd1位于一个名为"frmPassword“的h:表单中，并将您的按钮id=命名为”button1“。

var field = $('#frmPassword\\:pwd1');
var button= $('#frmPassword\\:button1');

if (field.attr('type') === 'password') {
   field.attr('type', 'text');
   button.removeClass('fas fa-eye-slash');
   button.addClass('fas fa-eye');
} else {
   field.attr('type', 'password');
   button.removeClass('fas fa-eye');
   button.addClass('fas fa-eye-slash');
}

编辑10/11/2021:这是作为toggleMask特性内置到PrimeFaces 10中的。见展示：http://primefaces.org/showcase/ui/input/password.xhtml