当用户单击"显示"链接时,显示密码,再次单击时将其隐藏

Question

我想让这个简单的脚本工作.基本上,当用户单击"显示"链接时,它将在密码文本框中显示密码,并在再次单击时隐藏密码.我已经搜索了解决方案,但找不到任何我需要的东西.这是代码:

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>

当我点击链接时,没有任何反应.我已经测试了这个,没有使用if语句,但仍然没有做任何事情.

Answer 1

你没有用document对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';
    }
}

你的id名字是非法的,很难处理:pwd'.$x.'你不能拥有这些字符.

HTML 4.01规范声明ID令牌必须以字母([A-Za-z])开头,后面可以跟任意数量的字母,数字([0-9]),连字符( - ),下划线(_) ,冒号(:)和句点(.).

此外,此方法不适用于所有浏览器,例如在IE <9中,您只能.type在元素附加到文档之前进行更改

尝试交换它们:

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

希望这有助于确定

Answer 2

这是一个使用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>

资料来源:

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

如何一致地跨浏览器对齐复选框及其标签