Question

我使用下面的代码作为密码字段。我如何增强它，所以显示密码这个词然后一旦点击该字段，输入的任何内容都应该以密码格式完成，其中条目用点掩盖。

我正在使用PHP。

代码：

<input type="password" name="password" maxlength="50" id="pass"  
 onclick="this.value='';" onfocus="this.select()"        
 onblur="this.value=!this.value?'Password':this.value;" value="Password">

Answer 1

尝试使用jQuery

$(document).ready(function(){
  $('#id_password_field').val('password');        
   $('#id_password_field').click(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
   $('#id_password_field').focus(function(){
       if($(this).val()=='password'){$(this).val('')}
   });
});

Answer 2

对于支持HTML5的浏览器，您只需使用占位符属性la：

即可

<input type="password" placeholder="Password Here">

这将向启用HTML5的用户显示“Password Here”，但是当用户开始输入时，它将显示星号。上面的其他答案已经显示了一些与Javascript相关的答案，但很快我们甚至不需要那些：）

Answer 3

事实并非如此，可以使用JavaScript。这是一个如何做到这一点的教程。这个tut使用jQuery，但是通过编写自己的JS脚本可以实现相同的结果。

jQuery toggle of password input

欢呼声

Answer 4

这绝对可以通过各种JavaScript选项实现。为了补充a.stgeorge发布的关于使用jquery的内容，你也可以编写自己的JS来实现它。

在此处查看此行动：http://www.moditekka.com/pwsample.html

HTML示例：

<input type="text" name="inpPass" id="inpPass" value="Password"/>

JavaScript代码段（在IE中失败，见下文）：

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        this.setAttribute("type", "password");
        this.value = "";
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        this.value = "Password";
        this.setAttribute("type", "text");
    }
}

编辑：如果有人还在阅读这篇文章，我只是意识到我的整洁代码在IE中不起作用，这要归功于西雅图的一个聪明决定，即只有在元素添加到DOM后才能读取“type”属性。为了适应这种情况，我在下面更新了我的JavaScript代码：

var inpPass = document.getElementById("inpPass");
inpPass.onfocus = function() {
    if(this.getAttribute("type") == "text") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'password');
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
        newInp.focus();
    }
}
inpPass.onblur = function() {
    if(this.value == "") {
        var newInp = document.createElement('input');
        newInp.onfocus = this.onfocus;
        newInp.onblur = this.onblur;
        newInp.ID = 'inpPass';
        newInp.name = 'inpPass';
        newInp.setAttribute('type', 'text');
        newInp.value = "Password";
        this.parentNode.appendChild(newInp);
        this.parentNode.removeChild(this);
    }
}

Answer 5

由于安全限制，这是不可能的。

您可以使用以下代码段

尝试（但无法使用）

<input type="password" id="inPwd" name="inPwd" propose="Password dummy" />
$("#inPwd").attr("type", "text");

Answer 6

你也可以像tumblr那样做。基本上他们有一个包装输入框的div。该div包括表单标签和输入。为简单起见，忽略图像更改。但我认为你将不得不处理透明图像/不透明度，以使它们如何工作。由于标签位于表单输入框的后面。

如果您在框中单击时观看firebug，则会在div周围添加第二个类。（这在这一点上更多地与图像有关。）但是当你开始输入第三类时，会包含将标签设置为display：none;

所以回顾一下更简单的方法：

Div包装标签和输入框。 div是相对定位的。标签绝对位于输入框后面。

使用onclick，他们添加半透明状态/交换背景图像。当您开始输入时，将标签设置为不显示;

Answer 7

使用纯JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
  <script type="text/javascript">
  function ChangeToPassField() {
    document.getElementById('PasswordField').type="password";
  }
  </script>
  </head>
  <body>
  <input type="text" value="password" id="PasswordField" onfocus="ChangeToPassField()" />
  </body>
  </html>

如何在密码字段中删除并显示“密码”字样

7 个答案: