how can i toggle a <p:password> field to text and password with a checkbox check uncheck

Question

I am using p:password tag for registration. I want to toggle the field to text when it is checked with check box, it change to password type mode when it is unchecked. How to solve the problem with primefaces component. I am using primefaces 3.0 and jsf 2.0.

Answer 1

under the cover generates the <input type="PASSWORD"/> field (with other attribute name etc..)

So now if you need to show password have a check box like

<input type="checkbox" id="showPassword" onclick="showPassword()"/> Show password

in javascript

function showPassword(){
  var showPasswordCheckBox = document.getElementById("showPassword");
  if(showPasswordCheckBox.checked){
        document.getElementById("ID_FOR_YOUR_PASSWORD_FIELD").type="TEXT";
  }else{
      document.getElementById("ID_FOR_YOUR_PASSWORD_FIELD").type="PASSWORD";
  }
}