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

【问题标题】：Combine Primefaces passwords validation: <p:password> and show/hide text/password icon together结合 Primefaces 密码验证：<p:password> 和显示/隐藏文本/密码图标一起
【发布时间】：2019-12-01 10:05:29
【问题描述】：

我正在尝试使用 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 将文本更改为密码，反之亦然，并且我不知道如何在用户单击时启用/禁用 show-pass 和 hide-pass 图标图标。

【问题讨论】：

标签： javascript java jsf primefaces

【解决方案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

【讨论】：

工作正常！谢谢！