【问题标题】：Javascript Show/Hide toggle button for password field密码字段的Javascript显示/隐藏切换按钮
【发布时间】：2017-09-09 11:58:54
【问题描述】：

我一直在从事一个项目，该项目要求我在表单密码字段上实现一个显示/隐藏按钮，该按钮在将密码显示为纯文本和将其隐藏在星号后面之间切换。

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

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() 函数？

【问题讨论】：

标签： javascript passwords field hide show

【解决方案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>

【讨论】：

【解决方案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，并在js 部分将其更改为button，这帮助我创建了一个名为button 的变量，其值为按钮。现在让我们回到 javascript 部分。当调用javascript中的函数时，它首先创建一个名为password的变量，其值为输入字段。然后，它检查input field 的type 是password 还是text，如果它发现它的类型是password，那么它将按钮的值（其中写入的文本）更改为隐藏并更改输入字段的类型为文本。如果它找到任何其他类型的输入字段，即如果它发现字段的类型是文本，它会将按钮的值更改为显示，并将字段的类型更改为密码。

另外，请通过clicking here.查看此内容

【讨论】：

虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。

【解决方案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"; 
    }


    }

【讨论】：

谢谢，但由于某种原因无法正常工作。需要详细说明吗？
更好 - 现在它可以在显示和隐藏之间正确切换，但在单击隐藏时不会隐藏密码。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

请尽早看到这个答案

【解决方案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>

【讨论】：

仅代码答案不合适。请描述您的解决方案有何不同并有助于回答 OP 问题。

【解决方案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";
      }
    }

【讨论】：