how to make password textbox value visible when hover an icon

Question

Good day all,

I have a form that has a password field:

<input type="password" name="password" size="30" /> 

Naturally, the input text will be replaced by (*).

So if the user typed 123 the box will show ***.

Up to here, it is straight forward, but...

Now, I wanna add a small icon next to the password box so when the user hover over this icon, he can see what he has entered so far.

So, while hovering, the box will show 123 and when the user leaves the icon the box should show *** again.

Is there any way to do this with JavaScript? Also, I am using HTML and PHP.

EDIT:

It really doesn't need to be an icon, it could be a checkbox or a button... AND if it could be done in CSS, I would really appreciate to know how

P.S. I've googled and search the stackoverflow but with no luck

Answer 1

You will need to get the textbox via javascript when moving the mouse over it and change its type to text. And when moving it out, you will want to change it back to password. No chance of doing this in pure CSS.

HTML:

<input type="password" name="password" id="myPassword" size="30" /> <img src="theicon" onmouseover="mouseoverPass();" onmouseout="mouseoutPass();" /> 

JS:

function mouseoverPass(obj) {   var obj = document.getElementById('myPassword');   obj.type = "text"; } function mouseoutPass(obj) {   var obj = document.getElementById('myPassword');   obj.type = "password"; }