logo标签列表

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

javascripthtmltextboxpasswordsshow-hide
17

我正在尝试让这个简单的脚本工作。基本上，当用户点击“显示”链接时，它会在密码文本框中显示密码，并在再次点击时隐藏密码。我已经搜索了解决方案，但没有找到我需要的内容。以下是代码：

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语句，仍然没有任何反应。

1
由于此问题发生在客户端，请展示您的HTML输出，而非PHP源代码。 - Diodeus - James MacFarlane
@Chimoo 即使没有显示按钮，任何人仍然可以通过查看页面的源代码来看到密码。 - Daniel Harris
什么？给我看一个你在密码字段上执行该操作的屏幕截图。 - TimCodes.NET
@Chimoo，我同意@Daniel的观点。如果他们能看到你的密码，他们只需要在Chrome中打开控制台并键入$$('input[type=password]')[0].value，就可以看到该字段的值...允许用户查看密码可能对于像网络“密码短语”或移动设备上的长而复杂的密码很有用... AUTOCOMPLETE=OFF就足够了... - ckozl
@Chimoo，在你离开的时候，首先不应该让你的密码正确地被输入。 - FluorescentGreen5
显示剩余5条评论
11个回答
14

你在使用 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

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

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

2

由于安全原因，您无法更改输入元素的类型。您必须使用新元素替换整个元素。

1
我不知道，这在Opera、Chrome和Firefox中都可以工作，但在IE中不行：<input type="password" onchange="this.type='text';"/> - Teemu
这不是真的，我刚在Chrome 18上尝试了一下，可以在“文本”和“密码”之间切换。就像我在答案中所说的那样，这是一个faux pas，因为IE（9版本之前）无法在元素附加到DOM后更改.type。 - ckozl
我的Chrome版本是17.0.963.56 m。这种类型的更改在其中起作用。IE出现了错误SCRIPT256属性未找到（或类似的东西，我的IE“说”芬兰语）。但是嘿，你得到了相同的结果，Chrome 18能够更改... - Teemu
是的，这是IE的问题 - 如果你不想让它在9之前的版本上工作，就继续替换。替换可以在任何地方使用，而且正是你所做的。 - Daff
1

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?

我们有一个类为“password”的密码输入框和一个ID为“showHide”的复选框。
使用复选框轻松解决显示/隐藏密码问题，这是入门级别的，只需复制/粘贴即可。完成！;-)
1

这很容易实现...我找到了这篇博客文章，其中用几行代码描述了实现的方法。我认为保留这样的选项并不是一个好的做法，因为密码必须被严肃对待。

这是那个页面上的代码；它使用了与您描述的相同的方法。但是使用了一个复选框。实际上，我在像Linux这样的oss中看到了他指出的情况。他们甚至不会用星号留下密码的痕迹。(但GUI工具会，不知道他们是否真的关心密码隐私，或者他们觉得在命令行中难以做到;-))

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

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

   

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

0

我相信这就是你想要的：

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>

0
0

尽管这个问题仍然有答案，但我还是要发表我的回答。

    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。 - user8158111
0

你的解决方案可能是：

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";
         }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接