结合 Primefaces 密码验证：<p:password> 和 show/hide text/password 图标在一起

Question

我正在尝试使用 p:password 在 Primefaces 中设置密码验证我还需要添加显示密码眼睛图标。
我需要像下图这样的东西，当用户单击光标时显示或隐藏 text/password。

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 将文本更改为密码，反之亦然，而且我不知道如何 enable/disable show-pass并在用户单击图标时隐藏通行证图标。

Answer 1

这比您不需要删除属性只需更改它要简单得多。使用 JQuery。在下面的示例中，您的 pwd1 在名为“frmPassword”的 h:form 中，并将您的按钮命名为 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');
}

编辑 2021 年 10 月 11 日： 这是 PrimeFaces 10 中内置的 toggleMask 功能。查看展示：http://primefaces.org/showcase/ui/input/password.xhtml

结合 Primefaces 密码验证：<p:password> 和 show/hide text/password 图标在一起

Combine Primefaces passwords validation: <p:password> and show/hide text/password icon together

javascript

java

jsf

primefaces