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

Posted 2023-02-24

【中文标题】当用户点击显示链接时，显示密码，再次点击时隐藏

【英文标题】：When a user clicks Show link, display the password, hide it when clicked again

【发布时间】：2012-03-14 06:08:06

【问题描述】：

我正在尝试让这个简单的脚本工作。基本上，当用户单击 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 语句对此进行了测试，但仍然什么也没做。

【问题讨论】：

因为这发生在客户端，所以显示你的 HTML 输出，而不是你的 php 源代码。

为什么要这样做？如果您的用户在浏览器中存储了密码并离开了他们的计算机怎么办？有人可以过来，按显示密码并窃取他们的所有详细信息。由于大多数人经常使用相同的密码，他们可能也可以访问他们的余生。这就是你做不到的原因

@Chimoo 这是在后端完成的，用户必须登录才能访问用户名和密码。如果不知道后端的用户名/密码，任何人都无法访问密码。

如果他们的会话保持打开状态会怎样

@Chimoo 任何人都可以通过查看页面源代码即使没有显示按钮也能看到密码。

【参考方案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 .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

【参考方案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/

How to align checkboxes and their labels consistently cross-browsers

【参考方案3】：

出于安全原因，您不能更改输入元素的类型。您必须用一个新元素替换整个元素。

【讨论】：

我不知道，这适用于 Opera、Chrome 和 Firefox，但不适用于 IE：<input type="password" onchange="this.type='text';"/>

这不是真的，我刚刚在 chrome 18 上尝试过，并且能够在 text 和 password 之间切换。就像我在回答中所说的那样，这是失礼的，因为一旦元素附加到 DOM，IE（版本 9 之前）就无法更改 .type

我的 Chrome 版本是 17.0.963.56 m。这种类型的变化在其中起作用。 IE 产生错误 SCRIPT256 Property not found（或类似的东西，我的 IE “说”芬兰语）。但是，嘿，你得到了相同的结果，Chrome 18 能够改变......

是的，它在 IE 中——如果您不希望它在 9 之前的版本上工作，请继续。更换无处不在，这正是您所做的。

【参考方案4】：

它真的很容易实现...我发现了这个blog post，它描述了用几行代码实现它的方式。我认为保留这样的选项不是一个好习惯，因为必须认真对待密码。

这是该页面的代码；它使用与您描述的相同的方法。但使用复选框。实际上我已经看到他在 oss 中指出的内容，例如 linux。他们甚至没有留下带有星号的密码痕迹。（但是 gui 的事情确实如此，不知道他们真的关心 pw 隐私，或者他们发现在命令行中很难做到这一点;-)）

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

【参考方案5】：

http://www.voidtricks.com/password-show-hide-checkbox-click/ 这是一个简单的教程，使用 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?

* 我们有一个“密码”类的密码输入字段和一个 ID 为“showHide”的复选框

使用复选框显示/隐藏密码的简单解决方案，这是菜鸟级别，只需复制/粘贴即可。完毕 ！！！ ;-)

【参考方案6】：

您可以使用内联脚本来简单实现显示/隐藏密码。

   

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

【参考方案7】：

如果我们将文本框类型设为"passowrd"，则不会显示字符，但是当我们将文本框类型设为"text" 时，字符会在我们键入时显示。

因此逻辑非常简单。我们可以通过 JavaScript 的"setAttribute(type,newvalue)" 函数来改变任何 HTML 元素的类型。

完整的代码示例见以下链接：

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

【参考方案8】：

你的解决方案可以是

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

【参考方案9】：

虽然问题还是有答案的，但我还是把这个答案贴出来。

    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>

【讨论】：

我已经发布了两个这样的答案。链接是link 1 link 2。

【参考方案10】：

我相信这就是你想要的：

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>

【参考方案11】：

不要改变输入类型，改变文本大小。让它非常小，便于隐藏。