Javascript Show/Hide toggle button for password field

Question

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?

score 8 · Answer 1 · edited Jun 08 '20 at 19:36

8

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>

edited Jun 08 '20 at 19:36

omukiguy

1,243
1
13
31

answered Apr 13 '17 at 12:09

Ali Haider

159
1
8

score 3 · Answer 2 · 2018-03-25T14:43:47.630

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.

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. — rollstuhlfahrer, Mar 25 '18 at 10:12

Love-Kesh · Answer 3 · 2017-04-13T12:16:45.740

2

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


    }

edited Apr 13 '17 at 12:16

answered Apr 13 '17 at 11:31

Love-Kesh

687
6
14

Thank you, but it's not working for some reason. Care to elaborate? – James Apr 13 '17 at 11:38
Better - now it correctly switches between Show and Hide but does not hide the password upon clicking Hide. – James Apr 13 '17 at 12:14

score 2 · Answer 4 · answered Jan 21 '19 at 15:54

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>

Nandha Kumar Singaram · Answer 5 · 2017-09-24T17:05:12.133

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>

score 1 · Answer 6 · 2018-02-20T13:07:07.650

1

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>

edited Feb 20 '18 at 13:07

answered Feb 19 '18 at 10:31

PLEASE see this answer as early as possible – Feb 20 '18 at 09:25

Akuh Innocent · Answer 7 · 2021-03-04T11:09:49.793

<!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>

Code only answers are not appropriate. Please descibe how your solution is different and helps answers the OPs question. — Sunny Patel, Mar 02 '21 at 16:32

score 1 · Answer 8 · answered Mar 11 '21 at 07:12

 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 Show/Hide toggle button for password field

8 Answers8

What does this code does?

Linked