I have been working on a project that requires me to implement a Show/Hide button on a form password field, that toggles between showing the password as plaintext, and hiding it behind asterisks.

What I came up with so far:

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>

It works fine for switching to showing the password, but how do I make it change the text of the button to "Hide" once the password is shown, and make it execute the pass() function?

HTML:

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

Javascript:

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

please check this working example. i hope it will help you

https://jsfiddle.net/ra8ot13y/

I think this is what you want. Please see this.

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>

What does this code does?

The html code creates the input as well as the button with Show written inside it. When the button is clicked, the onclick attribute is triggered which in turn calls a function of javascript named toggle. I had added this in the attribute's value inside () and had changed it to button inside the js part which helped me to create a variable named button whose value was the button. Now lets come back to the javascript part. When the function in javascript is called, it first creates a variable named password whose value is the input field. Then, it checks whether the type of the input field is password or text If it finds that its type is password, then it changes the button's value(text written inside it) to Hide and also changes the type of the input field to text. If it finds any other type of the input fiels i.e. if it finds that the type of the field is text, it changes the value of the button to Show and the field's type to password.

Also, check this out by clicking here.

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


    }

Using <button> to toggle <input>'s type on small touchscreen devices causes closing the virtual keyboard because the <input> loses focus. Nothing horrible, you say, but the user does not expect it happen and also (unless your input field is positioned in the top half of the viewport) the open virtual keyboard pushes input field up (so it stays visible in the viewport). Subsequently, closing the virtual keyboard will reposition it again on some devices/platforms. Quite unpleasant to the user, quite a few more things to think of for the client-side developer. My solution is using <label> instead of <button>. Here is my piece:

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>

Solution to show/hide toggle button for password field using 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>

Please make some changes.

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>

来源：https://stackoverflow.com/questions/43390966/javascript-show-hide-toggle-button-for-password-field

标签

javascript

passwords

field

hide

show

Javascript Show/Hide toggle button for password field

What does this code does?