I was prompted to write this article by talking to the site administrator of one of the Russian Premier League football clubs. I hope that he will read it and make this happen.

Now it has become very fashionable to make forms in which the header of the input field is written in the field itself. For example:


But what about the password field? After all, it replaces the default value with asterisks.
In this post, I decided to consider several options for how to make a password field with asterisks, but that the word “password” would be visible.

It is clear that without JS is not enough. Immediately, I apologize for this JavaScript - for a long time I have been writing exclusively using JQuery, and it is rather difficult to write in pure JS)
')
An example of our form

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="text" value ="" class ="authFormInput authFormInputPass" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

1. Replacing type

The solution that comes to mind the very first. Just change the type of input when setting the focus and removal. The beginning of the code is approximately as follows:

window.onload = function () {
window. document .getElementById( 'authFormInputPass' ).onfocus = function () {
this .setAttribute( "type" , "password" );
}
}

* This source code was highlighted with Source Code Highlighter .

But starting to check it in different browsers, we are faced with the fact that this code is understood by everyone, but not by IE. Sadly We celebrate, we think further.

2. Input Replacement

Why don't we put an input with text next to the password for the password next to and change them in turn?
Our form will look like this:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
< style type ="text/css" >
.hidden {
display: none;
}
.visible {
display: block;
}
</ style >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="text" value ="" class ="authFormInput authFormInputPass visible" id ="authFormInputPassT" name ="authFormInputPassT" />
< input type ="password" value ="" class ="authFormInput authFormInputPass hidden" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

The following JavaScript code clings to all this business:

window.onload = function () {
var authFormInputPass = document .getElementById( 'authFormInputPass' );
var authFormInputPassT = document .getElementById( 'authFormInputPassT' );

authFormInputPassT.onfocus = function () {
authFormInputPassT.className= "authFormInput authFormInputPass hidden" ;
authFormInputPass.className= "authFormInput authFormInputPass visible" ;
authFormInputPass.focus();
}

authFormInputPass.onblur = function () {
if (!authFormInputPass.value) {
authFormInputPass.className= "authFormInput authFormInputPass hidden" ;
authFormInputPassT.className= "authFormInput authFormInputPass visible" ;
}

}
}

* This source code was highlighted with Source Code Highlighter .

And surprisingly, everything works great and is pretty cross-browser.
Detected bugs: in IE6 there is a small jump in layout. But with the layout you can strictly fix the containers in which the inputs lie and it will not strain. Plus, the behavior of different passwords during work with hidden input is unknown. I tested in 10 Opera a built-in memory - it works fine.

3. Picture!

If you are strained by two inputa, we can try the following option: make for the input with the password a backguard on which the word "Password" is written, and then change the class of the input.
This will be our form:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
< html lang ="ru" >
< head >
< title > </ title >
< script type ="text/javascript" src ="script.js" ></ script >
< style type ="text/css" >
.noPass {
background-image:url('pass.gif');
}
</ style >
</ head >
< body >
< div >
< form action ="index.html" >
< p >
< input type ="text" value ="" class ="authFormInput authFormInputLogin" id ="authFormInputLogin" name ="authFormInputLogin" />
< input type ="password" value ="" class ="authFormInput authFormInputPass noPass" id ="authFormInputPass" name ="authFormInputPass" />
< input type ="submit" value =" " />
</ p >
</ form >
</ div >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

We hang up all this JavaScript on this:

window.onload = function () {
var authFormInputPass = document .getElementById( 'authFormInputPass' );

authFormInputPass.onfocus = function () {
authFormInputPass.className= "authFormInput authFormInputPass" ;
}

authFormInputPass.onblur = function () {
if (!authFormInputPass.value) {
authFormInputPass.className= "authFormInput authFormInputPass noPass" ;
}

}
}

* This source code was highlighted with Source Code Highlighter .

It also works great, nowhere does nothing jump, memorizers work with a bang.
Bugs:
1. Different font rendering in different browsers and OS. It may happen that the picture with the text “Password” will look slightly different than all the main text on the page.
2. Users who work on the Internet with images off. But the percentage of such people is incredibly small, but I think they will guess that the next field after the login field is the password field.

By the way, in the picture at the beginning of the topic this is implemented using just such a method.