form i { margin-left: -25px; margin-top: 11px; cursor: pointer; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" /> <p:inputText id="productadminpassword" 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> <i class="bi bi-eye-slash" id="togglePassword"></i> <script type="text/javascript"> const togglePassword = document.querySelector('#togglePassword'); const password = document.querySelector('#productadminpassword'); togglePassword.addEventListener('click', function () { const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); this.classList.toggle('bi-eye'); }); </script>Estos son los que he hecho. El icono de ojo (barra oblicua) se representa, pero no funciona y el texto de entrada también permanece oculto. También probé la nueva función de alternar en la etiqueta de contraseña. Amablemente ayúdame.
Simplemente puede usar el componente PrimeFaces p:password con el atributo toggleMask establecido en true . Este atributo agregará un ícono de mostrar/ocultar a la contraseña para permitir que la contraseña se desenmascare/vuelva a enmascarar. Asi que:
<p:password value="#{bean.password}" toggleMask="true"/>Vea el escaparate para una demostración https://www.primefaces.org/showcase/ui/input/password.xhtml
Consulte también https://primefaces.github.io/primefaces/12_0_0/#/components/password