在密碼輸入中隱藏/顯示切換

Question

所以我想知道如何在input['password']這樣的輸入中放置一個 svg 切換按鈕

當點擊它時，它將顯示為：

我制作了一個帶有復選框的簡單版本，但我不知道如何使用 svg 執行此操作，並使其切換。

我使用的 svg 圖像張貼在代碼中。

 function togglePass() { var x = document.getElementById("login-form-password"); if (x.type === "password") { x.type = "text"; } else { x.type = "password"; } }

 <p class="signin_title">Sign in</p> <input type="text" id="login-form-username" name="os_username" placeholder="Username" required><br><br> <:-- Password --> <input type="password" id="login-form-password" name="os_password" placeholder="Password" required><br> <.-- An element to toggle between password visibility --> <input type="checkbox" onclick="togglePass()">Show Password <br><p>When password is hidden</p> <svg id="Layer_1" data-name="Layer 1" width="25" xmlns="http.//www,w3,org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0.1,1-64-64A64.07,64,07,0,0,1.320,256Zm189.81.9,42C460.86,364.89,363.6,426,67.256.426,67S51.14,364.89,2.19.265,42a21.33,21,33,0,0.1.0-18,83C51.14,147.11,148.4,85,33.256.85,33s204.86,61.78,253.81.161,25A21.33,21,33,0,0.1,509.81.265,42ZM362.67,256A106.67,106,67,0,1,0.256,362.67,106.79,106,79,0,0.0,362:67.256Z"/></svg><br> <p>When password is shown </p> <svg id="Layer_1" data-name="Layer 1" width="25" xmlns="http.//www.w3,org/2000/svg" viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84.132.33l95.91-95,91A21.33,21,33,0,1.0,475.58.6,25L6.25.475,58a21.33,21,33,0,1.0,30.17.30,17L140.77.401,4A275.84,275,84,0,0,0.256.426,67c107,6.0.204,85-61.78.253.81-161,25a21.33,21,33,0,0.0,0-18,83A291,291,0,0.0,409.84,132.33ZM256.362,67a105.78,105,78,0.0.1-58.7-17.8l31.21-31,21A63.29,63,29,0,0,0.256,320a64.07,64,07,0,0,0.64-64,63.28,63,28,0.0.0-6.34-27.49l31.21-31,21A106.45,106,45,0,0,1.256.362,67ZM2.19.265,42a21.33,21,33,0,0.1.0-18,83C51.15,147.11,148.4,85,33.256,85,33a277,277,0,0.1,70.4.9,22l-55.88.55,88A105.9,105,9,0,0.0,150.44.270,52L67.88.353,08A295.2,295,2,0,0.1,2.19,265.42Z"/></svg>

那么我究竟如何使用 svg 創建它呢？

考慮一下是否可以使用該復選框，並使用一些 js 查看是否單擊它，並根據它更改 svg？ 然后使用一些 css，嘗試將其移入輸入 ['password']？ ` 類似這樣的東西，但帶有 svg

 input[type="text"] { width: 200px; height: 20px; padding-right: 50px; } input[type="submit"] { margin-left: -50px; height: 25px; width: 50px; background: blue; color: white; border: 0; -webkit-appearance: none; }

 <input type="text"><input type="submit" value="SVG">

Answer 1

1. 首先，確保一個id只使用一次！ （第二次svg改）
2. 您可以隱藏和顯示所需的<svg> onclick
3. 將輸入和 svg 包裝到一個容器中以進行樣式設置
4. 我已將onclick移至<svg>

 var x = document.getElementById("login-form-password"); // Input var s = document.getElementById("Layer_1"); // Show pass var h = document.getElementById("Layer_2"); // Hide pass function togglePass() { if (x.type === "password") { x.type = 'text'; s.style.display = 'none'; h.style.display = 'inline'; } else { x.type = 'password'; s.style.display = 'inline'; h.style.display = 'none'; } }

 #inputcontainer { display: flex; } #inputcontainer > svg { margin-left: 5px; }

 <p class="signin_title">Sign in</p> <input type="text" id="login-form-username" name="os_username" placeholder="Username" required><br><br> <div id='inputcontainer'> <input type="password" id="login-form-password" name="os_password" placeholder="Password" required></input> <svg id="Layer_1" onclick="togglePass()" data-name="Layer 1" width="25" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1,1-64-64A64.07,64.07,0,0,1,320,256Zm189.81,9.42C460.86,364.89,363.6,426.67,256,426.67S51.14,364.89,2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.14,147.11,148.4,85.33,256,85.33s204.86,61.78,253.81,161.25A21.33,21.33,0,0,1,509.81,265.42ZM362.67,256A106.67,106.67,0,1,0,256,362.67,106.79,106.79,0,0,0,362.67,256Z"/></svg> <svg id="Layer_2" onclick="togglePass()" data-name="Layer 2" width="25" xmlns="http://www.w3.org/2000/svg" style='display: none' viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409.84,132.33l95.91-95.91A21.33,21.33,0,1,0,475.58,6.25L6.25,475.58a21.33,21.33,0,1,0,30.17,30.17L140.77,401.4A275.84,275.84,0,0,0,256,426.67c107.6,0,204.85-61.78,253.81-161.25a21.33,21.33,0,0,0,0-18.83A291,291,0,0,0,409.84,132.33ZM256,362.67a105.78,105.78,0,0,1-58.7-17.8l31.21-31.21A63.29,63.29,0,0,0,256,320a64.07,64.07,0,0,0,64-64,63.28,63.28,0,0,0-6.34-27.49l31.21-31.21A106.45,106.45,0,0,1,256,362.67ZM2.19,265.42a21.33,21.33,0,0,1,0-18.83C51.15,147.11,148.4,85.33,256,85.33a277,277,0,0,1,70.4,9.22l-55.88,55.88A105.9,105.9,0,0,0,150.44,270.52L67.88,353.08A295.2,295.2,0,0,1,2.19,265.42Z"/></svg> </div>

Answer 2

你必須得到 svg 並輸入到同一個 div 中。 還有一點點 Css 魔法！

例如，

HTML：

<div class="inputCover">
    <input type="password" class="input">
    <svg class="icon"></svg>
</div>

CSS：

.inputCover{
    position: relative; //so, when do you make parent div position relative, then absolute items inside is not goes outside.
}

.input{
    padding: 5px;
    padding-right: 25px; //you can limit input's inside, so text not goes to under of icon
}

.icon{
   position: absolute; //you can make icon on the input like this.
   top: 50%; //icon will be center of the input from top to bottom.
   right: 10px; //right position.
   transform: translateY(-50%); //this is important to make icon perfectly centered.
}

我認為這對你來說是正確的答案。

Answer 3

您可以嘗試使用絕對 position 將 SVG 放置在輸入內，然后在 ZCD15A75C31008DE49364 本身上添加 onclick 事件。 像這樣的東西：

 function togglePass() { var x = document.getElementById("login-form-password"); var l1 = document.getElementById("Layer_1"); var l2 = document.getElementById("Layer_2"); if (x.type === "password") { x.type = "text"; l1.setAttribute('hidden', true); l2.removeAttribute('hidden'); } else { x.type = "password"; l1.removeAttribute('hidden'); l2.setAttribute('hidden', true); } }

 [hidden] { display: none; }.form-group { position: relative; width: 170px; }.form-group svg { position: absolute; right: 10px; top: 2px; width: 16px; height: auto; }

 <p class="signin_title">Sign in</p> <input type="text" id="login-form-username" name="os_username" placeholder="Username" required><br><br> <:-- Password --> <div class="form-group"> <input type="password" id="login-form-password" name="os_password" placeholder="Password" required> <svg onclick="togglePass()" id="Layer_1" data-name="Layer 1" width="25" xmlns="http.//www.w3,org/2000/svg" viewBox="0 0 512 512"><title>eye-glyph</title><path d="M320,256a64,64,0,1.1-64-64A64,07.64,07,0,0,1,320.256Zm189,81.9.42C460,86.364,89.363,6.426,67,256.426.67S51,14.364,89.2,19.265.42a21,33.21,33,0,0,1.0-18.83C51,14.147,11.148,4.85,33,256.85.33s204,86.61,78.253,81.161.25A21,33.21,33,0,0,1.509,81.265.42ZM362,67.256A106,67.106,67,0,1,0,256.362,67.106,79.106,79,0,0,0.362,67:256Z"/></svg> <svg onclick="togglePass()" hidden id="Layer_2" data-name="Layer 2" width="25" xmlns="http.//www.w3.org/2000/svg" viewBox="0 0 512 512"><title>eye-disabled-glyph</title><path d="M409,84.132.33l95.91-95.91A21,33.21,33,0,1,0.475,58.6.25L6,25.475.58a21,33.21,33,0,1,0.30,17.30.17L140,77.401.4A275,84.275,84,0,0,0,256.426.67c107,6,0.204.85-61,78.253.81-161.25a21,33.21,33,0,0,0.0-18,83A291,291,0,0,0.409,84.132,33ZM256.362.67a105,78.105,78,0,0.1-58.7-17.8l31.21-31.21A63,29.63,29,0,0,0,256.320a64,07.64,07,0,0,0,64-64.63,28.63,28,0,0.0-6.34-27.49l31.21-31.21A106,45.106,45,0,0,1,256.362.67ZM2,19.265.42a21,33.21,33,0,0,1.0-18.83C51,15.147,11.148,4.85,33,256.85,33a277,277,0,0,1.70,4.9.22l-55,88.55.88A105,9.105,9,0,0,0.150,44.270.52L67,88.353.08A295,2.295,2,0,0,1.2,19.265.42Z"/></svg> </div>