html toggle visibility password inside the input

Question

I'm learning html/css, I'm doing a registration form and I'd like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks...




    
    Index Registration
    
    
    
    
        
    


    
        
            
                
                    
                        Create new Account
                        
                            
                                
                                    
                                        First Name
                                        
                                    
                                
                                
                                    
                                        Last Name
                                        
                                    
                                
                            

                            
                                Your Nickname
                                
                            

                            
                                Your Email
                                
                            

                            
                                Password
                                
                                 visibility 
                            

                            
                                Repeat your password
                                
                                    
                                        
                                    
                                    
                                         visibility 
                                    
                                
                            

                            
                                
                                
                                    I agree all statements in Terms of service
                                
                            
                            
                              

                            
                                
                                
                            
                            
                            Have already an account? 
                                Login here

EDIT: the current password code you see are just some tests that I'm doing, If I don't put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side... by also like this, if the resolution change then the eye icon will not be in the right place

user_1971438 · Answer

This is how I implement pw visibility. As far as scalability, if you use Bootstrap's sizing classes it should all scale well. I've had no issues moving this between assorted screen sizes.

Addendum : centering the Eye

I modified the second password field. To properly vertically center it I had to alter the html. Compare against the first password HTML.

In particular:

wrapped the "eye" containing div and the input in it's own relative div. (position-relative moved from outer div.control
Added Bootstrap class h-100 to the "eye" div
Added bootstrap class align-middle to the "eye" and
Created an actual rule for .pw-toggle that sets height: 1rem; so that align-middle centers correctly.

$(function() {
  $("span.pw-toggle, span.pw-toggle2").click(function() {
    var $pwField = $($(this).data().target);
    var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
    $(this).text(TorP === "password" ? "visibility" : "visibility_off")
    $pwField.attr('type', TorP);
  });
});

span[data-target] {
  cursor: pointer;
}

.pw-toggle {
  height: 1rem;
}






  
    
      
        
          
            Create new Account
            
              
                
                  
                    First Name
                    
                  
                
                
                  
                    Last Name
                    
                  
                
              

              
                Your Nickname
                
              

              
                Your Email
                
              

              
                Password
                
                  visibility
                
                
              

              
                Repeat your password
                
                  
                    visibility
                  
                  
                
              

              

              
                
                  
                  
                  visibility
                  
                
              

              
                
                
                                    I agree all statements in Terms of service
                                
              

               

              
                
                
              

              Have already an account?
                Login here

user_16273374 · Answer

This is how you would implement that functionality with JavaScript. We grab the eye ball icon and the two password fields. Then, loop through the eyeBall and add an event listener to it. It checks whether the type attribute is password or text. If it is password, it changes it to text.

            let eyeBall = document.getElementsByClassName('viewPass');
            let passInput = document.getElementsByClassName('passwordInput');
            let passField = document.getElementById('passwordNewUser');


            function change_visibility($type) {
                for(let field of passInput) {
                    field.setAttribute('type', $type);
                }
            }

            for(let eye of eyeBall) {
                eye.addEventListener('click', function() {
                    if (passField.getAttribute('type') == 'password') {
                        change_visibility('text');
                    } else {
                        change_visibility('password');
                    }

                });
            }

.viewPass {
   cursor: pointer;
}

 
    
    
        
        Index Registration
        
        
        
        
            
        
    
    
        
            
                
                    
                        
                            Create new Account
                            
                                
                                    
                                        
                                            First Name
                                            
                                        
                                    
                                    
                                        
                                            Last Name
                                            
                                        
                                    
                                

                                
                                    Your Nickname
                                    
                                

                                
                                    Your Email
                                    
                                

                                
                                    Password
                                    
                                     visibility 
                                

                                
                                    Repeat your password
                                    
                                        
                                            
                                        
                                        
                                             visibility 
                                        
                                    
                                

                                
                                    
                                    
                                        I agree all statements in Terms of service
                                    
                                
                                
                                  

                                
                                    
                                    
                                
                                
                                Have already an account? 
                                    Login here

html toggle visibility password inside the input

2 Answers

Addendum : centering the Eye