How to remove and show word "password" in password field

Question

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

Answer 1

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

Answer 2

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

Answer 3

That is not true, it is possible using JavaScript. Here is a tutorial on how to do it. This tut uses jQuery but the same results could be achieved by writing your own JS script.

jQuery toggle of password input

cheers

Answer 4

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

Answer 5

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

Answer 6

You can also do like what tumblr does. Basically they have a div that wraps the input box. This div includes both the form label and the input. Ignore the image change for simplicity. But I think you will have to deal with transparent images / opacity to get it to work how they do it. Since the label is behind the form input box.

If you watch firebug as you click in the box it adds a 2nd class around the div. (this has more to do with the image at this point.) But when you start typing a 3rd class gets included that sets the label to display: none;

So to recap in a simpler way:

Div wraps a label and input box. The div is relative positioned. The label is absolutely positioned behind the input box.

Using onclick they add a semi transparent state / swap the background image. When you start typing it sets the label to display none;

Answer 7

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>