password input show/hide problem with img tag-CodePudding

I want to make show and hide for password input, but I don't know how! please help me! so, I have one input and after that, I have an img tag and I put img tag into the input password please help me to show and hide password with the img tag.

my code:

<label for="password-input" >
    <input  id="password-input" type="password" minlength="8" title="Must contain 
     at least 8 or more characters" placeholder="رمز عبور" required>
    <img  src="Eye-slash.svg" alt="">
</label>

and image:

CodePudding user response：

You can try this by adding event directly to img itself.

 <img class = "password-show-icon" src = "Eye-slash.svg" alt = "" onClick = "togglePasswordView()">

function togglePasswordView() {
    let type = document.getElementById("password-input").type;
    document.getElementById("password-input").type = (type == "text") ? "password" : "text";
}

CodePudding user response：

I can see how your problem could be confusing. To accomplish what you are trying to do, I would use the z attribute to stack the elements:

<label for="password-input" > 
    <input  id="password-input" type="password" 
     minlength="8" title="Must contain at least 8 or more characters" 
     placeholder="رمز عبور" required style="position: absolute;z- 
     index:900;">
     <img id="img1" src="" alt="" style="position: absolute;z- 
     index:1000;">My data</img>
</label>

Hope that is helpful to you! :)

CodePudding user response：

You must use javascript in order to toggle the type between "password" and "text".

This isn't a code requesting site, but because it's no work, and because you don't know any javascript, I will do you a favor. Make sure to change the class to id on the image tag, and paste the javascript code at the bottom of your html file.

I will leave it up to you to style the html elements.

#password-show-icon {
  height: 20px;
  cursor: pointer;
}

<label for="password-input" >
    <input  id="password-input" type="password" minlength="8" title="Must contain 
     at least 8 or more characters" placeholder="رمز عبور" required>
    <img id="password-show-icon" src="https://thumbs.dreamstime.com/b/show-password-icon-eye-symbol-vector-vision-hide-watch-secret-view-web-design-element-240754407.jpg" alt="">
</label>

<script>
  document.getElementById('password-show-icon').addEventListener('click', () => {
    let passwordInput = document.getElementById('password-input')
    let hiddenPassword = passwordInput.type == 'password';
    let type = 'password';

    if (hiddenPassword) {
      type = 'text';
    }

    passwordInput.type = type;
  });
</script>