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

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.

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

silver

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

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.

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

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

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>

tutor4web.com

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/

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

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>

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>

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

来源：https://stackoverflow.com/questions/9419780/when-a-user-clicks-show-link-display-the-password-hide-it-when-clicked-again

标签

javascript

html

textbox

passwords

show-hide