当用户点击显示链接时，显示密码，再次点击时将其隐藏

我试图让这个简单的脚本工作。 基本上，当用户点击Show链接时，它将在密码文本框中显示密码，并在再次单击时隐藏它。 我已经寻找解决方案，但找不到我需要的任何东西。 代码如下：

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语句来测试它，但仍然没有做任何事情。

---

您没有使用getElementById上的document

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

希望这有助于-ck

---

这里是一个使用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.djcxy.com/p/41453.html

上一篇: When a user clicks Show link, display the password, hide it when clicked again

下一篇: How to keep a checkbox and label on the same line in a Rails form?