Friday, June 27, 2014

How to HIde and Show Password Value in Visual Force page using JQuery

  <html xmlns="http://www.w3.org/1999/xhtml">  
 <head id="Head1" runat="server">  
   <title></title>  
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  
   </script>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       $('#txtPwd').blur(function () {  
         $('#txthdnPwd').val($(this).val());  
       });  
       $('#chkHidShw').change(function () {  
         var isChecked = $(this).prop('checked');  
         if (isChecked) {  
           $('#txtPwd').hide();  
           $('#txthdnPwd').show();  
           $('#txthdnPwd').attr('readonly', 'readonly');  
         }  
         else {  
           $('#txtPwd').show();  
           $('#txthdnPwd').hide();  
         }  
       });  
     });  
   </script>  
 </head>  
 <body>  
   <form id="form1" runat="server">  
   <div>  
     UserName:  
     <input type="text" id="txtUser" runat="server" />  
     <br />  
     Password:&nbsp;  
     <input type="password" id="txtPwd" runat="server" />  
     <input type="text" id="txthdnPwd" style='display: none;' />  
     <br />  
     <input type="checkbox" id="chkHidShw" />&nbsp;Show Password  
   </div>  
   </form>  
 </body>  
 </html>  

No comments: