When a user clicks Show link, display the password, hide it when clicked again

Question

I am trying to get this simple script to work. Basically, when a user clicks on the Show link, it will display the password in the password text box and hide it when it is clicked again. I have searched for solutions but couldn't find anything for what I need. Here is the code:

JavaScript

    function toggle_password(target){
    var tag = getElementById(target);
    var tag2 = getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';
    }
    else{
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }

    }

HTML

<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password('pwd0');" id="showhide">Show</a>

When I click the link, nothing happens. I have tested this without using the if statement too and still did nothing.

Since this happens on the client, show your HTML output, not your PHP source. — Diodeus - James MacFarlane, Feb 23 '12 at 19:27
why do you want to do this? what if your user has a password stored in the browser, and leaves their computer? someone can come along, press show password and steal all their details. since most people use the same passwords a lot, they can probably access the rest of their life too. This is why you can't do it — TimCodes.NET, Feb 23 '12 at 19:30
@Chimoo This is done in the backend where the user has to log in to access the username and password. There is no way anyone can access the password without knowing the username/password to the backend. — Daniel Harris, Feb 23 '12 at 19:32
@Chimoo Anyone can still see the password even if there is no show button by looking at the source code of the page. — Daniel Harris, Feb 23 '12 at 19:40
what? show me a screenshot of you doing that on a password field... — TimCodes.NET, Feb 23 '12 at 19:46
@Chimoo, I agree with @Daniel if they can see your password is there all they have to do is open up a console in chrome and type `$$('input[type=password]')[0].value` and they can see what the value the field has... allowing a user to see a password could be nice for something long and complex like a network "pass phrase" or on a mobile device... `AUTOCOMPLETE=OFF` is all that would be needed anyway... — ckozl, Feb 23 '12 at 19:48
looks like you're right, I can't believe browsers let you do this... — TimCodes.NET, Feb 23 '12 at 19:50
@Chimoo you shouldn't be leaving your password typed in correctly while you're away in the first place. — FluorescentGreen5, Sep 18 '17 at 06:02

ckozl · Accepted Answer · 2012-02-23T19:42:21.827

you weren't using document on for getElementById

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';

    } else {
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }
}

your id names are illegal and difficult to work with: pwd'.$x.' you can't have some of those chars.

The HTML 4.01 spec states that ID tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (-), underscores (_), colons (:), and periods (.).

also, this method will not work in all browsers, in IE < 9 for instance you can only change .type before the element is attached to the document

try swapping them:

function swapInput(tag, type) {
  var el = document.createElement('input');
  el.id = tag.id;
  el.type = type;
  el.name = tag.name;
  el.value = tag.value; 
  tag.parentNode.insertBefore(el, tag);
  tag.parentNode.removeChild(tag);
}

function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    var tag2 = d.getElementById("showhide");

    if (tag2.innerHTML == 'Show'){

        swapInput(tag, 'text');
        tag2.innerHTML = 'Hide';

    } else {
        swapInput(tag, 'password');   
        tag2.innerHTML = 'Show';
    }
}

hope this helps -ck

score 5 · Answer 2 · edited May 23 '17 at 11:54

Here is an example using jQuery (pastebin):

$(document).ready(function() {
  $("#showHide").click(function() {
    if ($(".password").attr("type") == "password") {
      $(".password").attr("type", "text");

    } else {
      $(".password").attr("type", "password");
    }
  });
});

#showHide {
  width: 15px;
  height: 15px;
  float: left;
}
#showHideLabel {
  float: left;
  padding-left: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Password:</td>
    <td>
      <input type="password" name="password" class="password" size="25">
    </td>
  </tr>
  <tr>
    <td></td>
    <td>
      <input type="checkbox" id="showHide" />
      <label for="showHide" id="showHideLabel">Show Password</label>
    </td>
  </tr>
</table>

Sources:

http://www.voidtricks.com/password-show-hide-checkbox-click/

How to align checkboxes and their labels consistently cross-browsers

score 2 · Answer 3 · answered Feb 23 '12 at 19:26

2

Because of security reasons you can't change the type of an input element. You have to replace the entire element with a new one.

answered Feb 23 '12 at 19:26

Daff

41,847
9
99
113

1

I dont't know, this works in Opera, Chrome and Firefox, but not in IE: `` – Teemu Feb 23 '12 at 19:38
that's not true, i just tried on chrome 18 and was able to switch between `text` and `password`. Like I said in my answer this is faux pas because IE (prior to version 9) couldn't change the `.type` once the element is attached to the DOM – ckozl Feb 23 '12 at 19:39
My Chrome version is 17.0.963.56 m. That type change works in it. IE produced an error SCRIPT256 Property not found (or something like that, my IE "speaks" finnish). But hey, you've got same results, Chrome 18 was be able to change... – Teemu Feb 23 '12 at 19:53
Yeah it was in IE thing - if you don't want it to work on versions prior to 9 just go ahead. Replacing works everywhere and is exactly what you did. – Daff Feb 23 '12 at 19:54

score 1 · Answer 4 · answered Oct 03 '14 at 16:51

Its really easy to achieve...I found this blog post which describes the way of doing it with a few lines of code. I think its not a good practice to keep an option like this because passwords must be treated seriously.

here is the code from that page; it uses the same approach as you described. but uses a check-box.and practically i have seen what he points out in oss' like linux. they don't even leave a trace of the password with an asterisk.(but the gui thing does, don't know they really care about pw privacy or they find it difficult to do it in command line ;-) )

var textbox_elem = document.getElementById("password");
    if(check_box.checked)
    textbox_elem.setAttribute("type", "text");
    else
    textbox_elem.setAttribute("type", "password");

score 1 · Answer 5 · answered Jun 06 '17 at 12:16

http://www.voidtricks.com/password-show-hide-checkbox-click/ This is a simple tutorial to show a password in a input box when a checkbox is checked and hide it when the checkbox is unchecked using jQuery.

Javascript

<script type="text/javascript">
 $(document).ready(function () {
 $("#showHide").click(function () {
 if ($(".password").attr("type")=="password") {
 $(".password").attr("type", "text");
 }
 else{
 $(".password").attr("type", "password");
 }

 });
 });
</script>

<!-- language: lang-html -->

HTML *

<input type="password" class="password"><br>
    <input type="checkbox" id="showHide"> Show?

* We have a password input field with the class “password” and a checkbox with the id “showHide”

Easy solution for show / hide password using checkboxes, and this is noob level just copy/paste. DONE !!! ;-)

score 1 · Answer 6 · answered Nov 04 '17 at 05:49

You could use inline script for a simple implementation of show/hide password.

   

 <form>
    <input 
    onmouseover="this.setAttribute('type','text')"               
    onmouseout="this.setAttribute('type','password')" 
    placeholder="Hover to show password!" 
    type="password" 
    name="password-login"
    id="password-login"
    >
    </form>

score 0 · Answer 7 · edited Jul 16 '14 at 17:28

If we make a textbox type as "passowrd" then chars are not shown and but when we make a text-box type "text" chars are shown as we type.

Hence the logic is very simple. We can change the type of any HTML element by "setAttribute(type,newvalue)" function of JavaScript.

A complete code example can be seen on below link:

http://www.tutor4web.com/javascript/how-to-show-password-as-text-with-checkbox-using-javascript/

score 0 · Answer 8 · answered Aug 13 '15 at 16:11

your solution can be

function toggle_pass(){
    var pass = document.getElementById('showhide').innerHTML;
        if(pass=="show")
         {
            document.getElementById('pwd0').type = "text";
            pass= "Hide";
         }
        else
         {
            document.getElementById('pwd0').type = "password";
            pass = "Show Password";
         }
}

score 0 · Answer 9 · 2018-02-21T13:43:22.030

0

Although the question still has the answer, I am still posting this answer.

    function toggle_password () {
    var tag = document.getElementById("pwd0");
    var tag2 = document.getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.type="text";   
        tag2.innerText = 'Hide';
    }
    else {
        tag.type="password";   
        tag2.innerText = 'Show';
    }

    }

<label for="pwd0">Password:</label>
<input type="password" value="####" name="password" id="pwd0" />
<a href="#" onclick="toggle_password();" id="showhide">Show</a>

edited Feb 21 '18 at 13:43

answered Feb 21 '18 at 13:35

I had already posted two such answers already. The Links are [link](https://stackoverflow.com/questions/31224651/show-hide-password-onclick-of-button-using-javascript-only/45639124#45639124) 1 [link](https://stackoverflow.com/questions/43390966/javascript-show-hide-toggle-button-for-password-field/48864159#48864159) 2. – Feb 21 '18 at 13:39

score 0 · Answer 10 · answered Apr 04 '19 at 08:33

I believe this is how you wanted:

function toggle_password(){
  var d = document;
  var tag = d.getElementById("pwd");
  var tag2 = d.getElementById("showhide");
  if (tag2.innerHTML == 'Show'){
    tag.setAttribute('type', 'text');
    tag2.innerHTML = 'Hide';
  } else {
    tag.setAttribute('type', 'password');
    tag2.innerHTML = 'Show';
  }
}

#input_field{
  margin:25px;
  padding:25px;
  border:5px solid black;
}

<html>
<head>
</head>
<body>
 <div id="input_field">
  <label for="pwd">Password:</label>
  <input type="password" value="" name="password" id="pwd" />
  <a href="#" onclick="toggle_password();"                         
  id="showhide">Show</a>
 <div>
</body>
</html>

score -3 · Answer 11 · answered Aug 17 '15 at 16:35

-3

Don't change input type, change text size. Make it very small for Hide.

answered Aug 17 '15 at 16:35

Mickey Mouse

1

When a user clicks Show link, display the password, hide it when clicked again

JavaScript

HTML

11 Answers11

Linked