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

时间:2012-02-23 19:23:08

标签: javascript html textbox passwords show-hide

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

的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语句,但仍然没有做任何事情。

11 个答案:

答案 0 :(得分:14)

您没有在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&lt;例如,您只能在元素附加到文档之前更改.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';
    }
}

希望这有助于确认

答案 1 :(得分:5)

以下是使用jQuerypastebin)的示例:

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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

它很容易实现......我发现这个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");

答案 4 :(得分:1)

sending a message to topic 这是一个简单的教程,用于在选中复选框时在输入框中显示密码,并在使用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”的复选框

使用复选框显示/隐藏密码的简单解决方案,这只是复制/粘贴的noob级别。完成!!! ; - )

答案 5 :(得分:0)

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

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

可以在下面的链接中看到完整的代码示例:

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

答案 6 :(得分: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";
         }
}

答案 7 :(得分:0)

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

   

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

答案 8 :(得分: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>

答案 9 :(得分: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>

答案 10 :(得分:-2)

不要更改输入类型,更改文字大小。使它隐藏得非常小。