Javascript 顯示/隱藏密碼字段的切換按鈕

Question

我一直在從事一個項目，該項目要求我在表單密碼字段上實現一個顯示/隱藏按鈕，該按鈕在將密碼顯示為純文本和將其隱藏在星號后面之間切換。

到目前為止我想出了什么：

 function pass(){ document.getElementById('password').type="password"; } function text(){ document.getElementById('password').type="text"; }

 <input type="password" id="password" /> <button class="ui-component__password-field__show-hide" type="button" onclick="text()">Show</button>

它可以很好地切換到顯示密碼，但是如何在顯示密碼后將按鈕的文本更改為“隱藏”，並使其執行 pass() 函數？

Answer 1

 function toggler(e) { if( e.innerHTML == 'Show' ) { e.innerHTML = 'Hide' document.getElementById('password').type="text"; } else { e.innerHTML = 'Show' document.getElementById('password').type="password"; } }

 <input type="password" id="password"> <button onclick="toggler(this)" type="button">Show</button>

Answer 2

我想這就是你想要的。 請看這個。

 function toggle(button) { var password = document.getElementById("password"); if (password.type == "password") { button.innerHTML = "Hide"; password.type = "text"; } else { button.innerHTML = "Show"; password.type = "password"; } }

 <input type="password" id="password" /> <button class="ui-component__password-field__show-hide" type="button" onclick="toggle(this);">Show</button>

這段代碼有什么作用？

html 代碼創建輸入以及其中寫有Show的按鈕。 單擊按鈕時，將觸發 onclick 屬性，該屬性又會調用名為toggle的 javascript 函數。 我加入了this在屬性值中()把它改為button JS部分這讓我創建一個變量命名內部button ，其值為按鈕。 現在讓我們回到 javascript 部分。 當調用 javascript 中的函數時，它首先創建一個名為password的變量，其值為輸入字段。 然后，它檢查input field的type是password還是text如果它發現它的類型是password ，則將按鈕的值（寫入其中的文本）更改為隱藏，並將輸入字段的類型更改為文本。 如果它找到任何其他類型的輸入字段，即如果它發現字段的類型是文本，它會將按鈕的值更改為顯示，將字段的類型更改為密碼。

此外，請點擊此處查看。

Answer 3

  <button class="ui-component__password-field__show-hide" type="button" 
onclick="text(this)">Show</button>


   function text(item){ 
     if(item.innerText=='Show'){
      item.innerText='Hide';
      document.getElementById('password').type="password"; 
    }else{
     item.innerText='Show';
     document.getElementById('password').type="text"; 
    }


    }

Answer 4

在小型觸摸屏設備上使用<button>切換<input>的類型會導致關閉虛擬鍵盤，因為<input>失去焦點。 沒什么可怕的，你說，但用戶不希望它發生（除非你的輸入字段位於視口的上半部分）打開的虛擬鍵盤將輸入字段向上推（因此它在視口中保持可見）。 隨后，關閉虛擬鍵盤將在某些設備/平台上再次重新定位。 對用戶來說很不愉快，對於客戶端開發人員來說還有很多事情要考慮。 我的解決方案是使用<label>而不是<button> 。 這是我的作品：

 function text(label){ var input = document.getElementById(label.htmlFor); if(input.type === "password"){ input.type = "text"; label.innerHTML = "Hide"; }else{ input.type = "password"; label.innerHTML = "Show"; } }

 <!DOCTYPE html> <html lang="en"> <head> <title>Show/Hide password</title> </head> <body> <input type="password" id="password"/> <label for="password" onclick="text(this)">Show</label> </body> </html>

Answer 5

使用 JavaScript 顯示/隱藏密碼字段的切換按鈕的解決方案。

<!DOCTYPE html>
<html>
<head>
<title>Password-Show/Hide</title>
<script type="text/javascript">
//alert("hi");
function toggle(){
    alert("hello");
    var button = document.getElementById("show_hide").innerHTML;
    var pass = document.getElementById("password");
    if(button == "Show Password"){
        pass.setAttribute("type","text");
        document.getElementById("show_hide").innerHTML = 'Hide Password';
    }
    else{
        pass.setAttribute("type","password");
        document.getElementById("show_hide").innerHTML = "Show Password";
    }

}
window.addEventListener("load",function(){
    var sh = document.getElementById("show_hide");
    sh.addEventListener("click",toggle);
});
</script>
</head>
<body>
<input type="password" name="password" id="password" placeholder="Password" />
<button id="show_hide" >Show Password</button>
</body>
</html>

Answer 6

請進行一些更改。

 function text() { var a=document.getElementById('password'); var b=document.getElementById('button'); if (a.type=="password"){ a.type = "text"; b.innerText = "Hide"; } else { a.type = "password"; b.innerText = "Show"; } }

 <input type="password" id="password"> <button class="ui-component__password-field__show-hide" type="button" onclick="text()" id="button">Show</button>

Answer 7

<!DOCTYPE html>
<html>
<div>
        <form>
            <label>Password:</label>
            <input type="password" name="password" id="pword">
            <br>
            <small id="hide">Show</small><input type="checkbox" name="checkbox" onclick="togglePassword()">
        </form>
    </div>
</html>

    <script type="text/javascript">
        
        function togglePassword(){
            x = document.getElementById("pword")
            y = document.getElementById("hide")
    
            if (x.type ==="password") {
                x.type = 'text';
                y.innerHTML = "Hide"
            } else{
                x.type="password";
                y.innerHTML = "Show"
            }
        }
    </script>

Answer 8

 Some script modified. Can you see also link
https://www.w3schools.com/howto/howto_js_toggle_password.asp

<input type="password" id="myInput" name="password" placeholder="Password"> 
 
 <i onclick="showPass()" id="adClass" class="fa fa-low-vision" aria-hidden="true"></i>


function showPass() {
        //alert(2);
      var x = document.getElementById("myInput");
      if (x.type === "password") {
          //font awesome eye close icon add it.
          $('#adClass').addClass('fa-eye');
          $('#adClass').removeClass('fa-low-vision');
        x.type = "text";
      } else {
        $('#adClass').addClass('fa-low-vision');
         $('#adClass').removeClass('fa-eye');
        x.type = "password";
      }
    }

Javascript 顯示/隱藏密碼字段的切換按鈕

問題描述

8 個解決方案

解決方案1
9 2017-04-13 12:09:39

解決方案2
3

這段代碼有什么作用？

解決方案3
2 2017-04-13 11:31:10

解決方案4
2 2019-01-21 15:54:27

解決方案5
1 2017-09-24 16:57:16

解決方案6
1

解決方案7
1 2021-03-02 16:11:44

解決方案8
1 2021-03-11 07:12:35

Javascript 顯示/隱藏密碼字段的切換按鈕

問題描述

8 個解決方案

解決方案1 9 2017-04-13 12:09:39

解決方案2 3

這段代碼有什么作用？

解決方案3 2 2017-04-13 11:31:10

解決方案4 2 2019-01-21 15:54:27

解決方案5 1 2017-09-24 16:57:16

解決方案6 1

解決方案7 1 2021-03-02 16:11:44

解決方案8 1 2021-03-11 07:12:35

解決方案1
9 2017-04-13 12:09:39

解決方案2
3

解決方案3
2 2017-04-13 11:31:10

解決方案4
2 2019-01-21 15:54:27

解決方案5
1 2017-09-24 16:57:16

解決方案6
1

解決方案7
1 2021-03-02 16:11:44

解決方案8
1 2021-03-11 07:12:35