密碼輸入顯示/隱藏 img 標簽的問題

Question

我想顯示和隱藏密碼輸入，但我不知道怎么做！ 請幫我！ 所以，我有一個輸入，然后，我有一個 img 標簽，我將 img 標簽放入輸入密碼中，請幫助我使用 img 標簽顯示和隱藏密碼。

我的代碼：

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

和圖像：

Answer 1

您可以通過將事件直接添加到 img 本身來嘗試此操作。

 <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";
}

Answer 2

我可以看到您的問題如何令人困惑。 為了完成你想要做的事情，我會使用 z 屬性來堆疊元素：

<label for="password-input" class="password-container"> 
    <input class="main-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>

希望對你有幫助！ :)

Answer 3

您必須使用 javascript 在“密碼”和“文本”之間切換type 。

這不是一個代碼請求站點，但因為它沒有工作，而且因為你不知道任何 javascript，我會幫你一個忙。 確保將圖像標簽上的class更改為id ，並將 javascript 代碼粘貼到 html 文件的底部。

我將由您來設置 html 元素的樣式。

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

 <label for="password-input" class="password-container"> <input class="main-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>