0

我将下面的代码用于密码字段。我该如何增强它以显示密码一词，然后一旦单击该字段并且输入的任何内容都应以密码格式完成，其中条目用点屏蔽..

我正在使用 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">
4

7 回答 7

3

尝试使用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('')}
   });
});
于 2011-03-01T20:49:44.920 回答
3

对于支持 HTML5 的浏览器，您可以简单地使用 placeholder 属性，例如：

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

这将向启用 HTML5 的用户显示“此处的密码”，但当用户开始输入时，它将显示星号。上面的其他答案显示了一些与 Javascript 相关的答案，但很快我们甚至不需要这些答案：)

于 2011-03-01T20:52:23.357 回答
2

这不是真的，使用 JavaScript 是可能的。这是有关如何执行此操作的教程。这个 tut 使用 jQuery，但可以通过编写自己的 JS 脚本来实现相同的结果。

密码输入的jQuery切换

干杯

于 2011-03-01T20:46:41.167 回答
2

这完全可以通过各种 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);
    }
}
于 2011-03-01T21:07:49.993 回答
1

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

您可以使用以下代码段尝试它（但它不起作用）

<input type="password" id="inPwd" name="inPwd" propose="Password dummy" />
$("#inPwd").attr("type", "text");
于 2011-03-01T20:44:28.697 回答
1

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

如果您在单击框时观看萤火虫，它会在 div 周围添加第二类。（此时这与图像有关。）但是当您开始输入第 3 类时，将包含将标签设置为显示：无；

因此，以更简单的方式回顾一下：

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

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

于 2011-03-02T01:30:42.383 回答
0

用纯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>
于 2011-09-20T10:51:03.737 回答