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

发布于 2024-10-19 13:31:09 字数 334 浏览 2 评论 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">

原文

I am using the code below for the password field. How can i enhance it so show the word Password and then once the field is clicked and whatever is being entered should be done in the password format where the entries are masked with the dots..

I am using PHP.

Code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初吻给了烟 2024-10-26 13:31:09

尝试使用 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('')}
   });
});

try using 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('')}
   });
});

回复收藏 0 原文

故事还在继续 2024-10-26 13:31:09

对于支持 HTML5 的浏览器，您可以简单地使用占位符属性，a la：

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

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

For HTML5-enabled browsers, you can simply use the placeholder attribute, a la:

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

This will show "Password Here" to HTML5-enabled users, but when the user starts typing, it will show the asterisks instead. Other answers above have shown some Javascript-related answers, but soon we won't even need those :)

回复收藏 0 原文

蓝海 2024-10-26 13:31:09

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

密码输入的 jQuery 切换

干杯

回复收藏 0 原文

阳光①夏 2024-10-26 13:31:09

通过各种 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);
    }
}

This is absolutely possible through a variety of JavaScript options. To supplement what a.stgeorge posted about using jquery, you can also write your own JS to do it.

See it in action here: http://www.moditekka.com/pwsample.html

HTML sample:

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

JavaScript snippet (this fails in IE, see below):

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");
    }
}

EDIT:
If anyone is still reading this I just realized that my neat code won't work in IE, thanks to a clever decision in Seattle to make the "type" property read only once an element has been added to the DOM. To accommodate this I've updated my JavaScript code below:

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);
    }
}

回复收藏 0 原文

梦回梦里 2024-10-26 13:31:09

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

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

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

This is not possible due to security restrictions.

You can try it (but it won't work) using the following snippet

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

回复收藏 0 原文

明天过后 2024-10-26 13:31:09

你也可以像 tumblr 那样做。基本上他们有一个div来包裹输入框。该 div 包括表单标签和输入。为简单起见，忽略图像更改。但我认为你必须处理透明图像/不透明度才能使其按照他们的方式工作。由于标签位于表单输入框的后面。

如果您在单击框中时观看 Firebug，它会在 div 周围添加第二类。（此时这与图像有更多关系。）但是当您开始输入时，会包含第三个类，该类将标签设置为显示：none;

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

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

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

回复收藏 0 原文

鹿港巷口少年归 2024-10-26 13:31:09

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

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

回复收藏 0 原文

~没有更多了~