结合 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 代码：

    <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 和 p:password 将文本更改为密码，反之亦然，并且我不知道如何在用户单击图标时启用/禁用显示通过和隐藏通过图标。

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');
}