如何在密码字段中删除并显示单词“password”

我正在使用下面的密码字段代码。我怎样才能增强它，所以显示单词密码，然后一旦该字段被点击和无论是输入应该在密码的格式，其中的条目被屏蔽的点完成..如何在密码字段中删除并显示单词“password”

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

来源

2011-03-01 AAA

尝试使用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-01 20:49:44 eos87

我该如何实施？谢谢！ – AAA 2011-03-01 20:59:55

你可以用这个加载jquery库' '在你的标签内，并在

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

可以使用下面的代码片段

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

来源

2011-03-01 20:44:28 BenR

也MAL想看看HTML 5的建议属性。 http://diveintohtml5.org/forms.html – BenR 2011-03-01 20:45:46

这是不正确的尝试（但它不会工作），也可以使用JavaScript。这里是一个关于如何去做的教程。这个tut使用jQuery，但通过编写自己的JS脚本可以实现相同的结果。

jQuery toggle of password input

欢呼

来源

2011-03-01 20:46:41

这是正确的，通过您自己的自定义JS或使用jquery，DOM脚本很可能是这样。我已经发布了一个关于如何在自己的答案中使用自己的JS做的示例。 – Infotekka 2011-03-01 21:05:52

@infotekka - 同意，使用DOM而不是像jQuery这样的打包库是要走的路。更少的开销和完全控制。很好的答案和补充代码。 Thnx（moditekka的+1） – 2011-03-01 21:09:41

对于支持HTML5的浏览器，你可以简单地使用占位符属性，一拉：

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

这将将“密码在这里”显示为HTML5-en但是当用户开始输入时，它会显示星号。上面的其他答案显示了一些Javascript相关的答案，但很快我们甚至不需要那些:)

来源

2011-03-01 20:52:23 Jemaclus

这是绝对有可能通过各种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中工作，这要归功于Seattl的一个聪明的决定e仅在元素添加到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-01 21:07:49 Infotekka

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

如果您在框中单击时观看萤火虫，它会在div上添加第二课。（这一点与图像有关。）但是，当你开始输入一个第三类获取包括设置标签显示：无;

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

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

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

来源

2011-03-02 01:30:42 mardala

纯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-20 10:51:03

嘿阿杰谢谢！这实际上将“密码”一词转换为点。我只想要点显示只有当输入新鲜的东西... – AAA 2011-09-22 12:40:12

如何在密码字段中删除并显示单词“password”

回答

相关问题