Password Eye

You've seen eye icons with password fields, I'm certain. When the eye icon is tapped, what you've typed into the password field becomes readable. If it is already readable, it becomes unreadable.

There are two eye icons. One is an open eye, and one is a closed eye.

When the password field is unreadable and the open eye icon is tapped, two things happen:

1. The password field becomes readable.

2. The eye icon changes to a closed eye.

When the password field is readable and the closed eye icon is tapped, the two things are reversed:

1. The password field becomes unreadable.

2. The eye icon changes to an open eye.

To read what was typed, tap the open eye. To obfuscate what was typed, tap the closed eye.

Within the web page code, when the open eye is tapped, this happens:

1. The password field changes from type="password" to type="text".

2. The src value in the img tag for the eye icon changes to the URL of the closed eye image.

Both actions are done with JavaScript.

When the opposite happens (close-eye is tapped), these are the steps:

1. The password field changes from type="text" to type="password".

2. The src value in the img tag for the eye icon changes to the URL of the open eye image.

The eye icon can be placed outside the password field or within the password field.

Both placements use the same JavaScript. Therefore, you can change your mind about placement and not have to change the JavaScript.

Here is the JavaScript.

<script style="text/javascript">
function PasswordEyeToggle(eye)
{
   var input = document.getElementById("enhanced-password");
   var openURL = "https://www.willmaster.com/possibilities/images/eye-open.png";
   var closedURL = "https://www.willmaster.com/possibilities/images/eye-closed.png";
   if(input.type==="password")
   {
      input.type="text";
      eye.src=closedURL;
   }
   else
   {
      input.type="password";
      eye.src=openURL;
   }
}
</script>

Customizations for the JavaScript are:

1. The id value of the password field. You'll see how the id is determined when you see the source code of the two examples.

2. The URLs of the open- and closed-eye icon images. One of those will be used in the examples.

If you prefer not to download or create your own eye images, you are welcome to download the eyes used in the examples for your own use.

Here is the first example. The eye is outside the password field. To see how it works, type something into the password field and tap the eye icon.

Password:

Here is the source code of the above demonstration.

Password: <img src="https://www.willmaster.com/possibilities/images/eye-open.png" onclick="PasswordEyeToggle(this)" style="width:25px; cursor:pointer;">
<br>
<input id="enhanced-password" type="password" style="width:200px;">

The id value of the password field is enhanced-password. You'll see the value in the JavaScript source code further above. If one changes, the other needs to change accordingly.

The img tag's src value is the URL for the image icon. The URL depends on the type of password field you start out with. If type="password", then you would specify the URL of the open-eye icon. If type="text", the URL of the closed-eye icon should be used.

Here is the second example. The eye icon appears to be within the form field.

Password:

Here is the source code of the above demonstration.

Password:
<div style="position:relative; width:fit-content;">
<input id="enhanced-password" type="password" style="box-sizing:border-box; padding-right:28px;">
<div style="position:absolute; bottom:0px; right:2px; top:50%; transform:translateY(-60%);"><img src="https://www.willmaster.com/possibilities/images/eye-open.png" onclick="PasswordEyeToggle(this)" style="width:25px; cursor:pointer;"></div>
</div>

To place the eye icon so it appears to be within the form field:

• The form field input tag and the img tag are wrapped within a div with CSS styles position:relative and width:fit-content.

• The img tag is in a div immediately after the form field input tag with CSS styles position:absolute.

The positioning CSS right, top, bottom, or transform:translateY(), may need to be tweaked to position the eye icon exactly where you want it.

This article has provided all the code that is needed to implement an eye icon for a password field. Vital particulars have been addressed.

You may, of course, also change the image URL or size. Also the form field style and other styles.

(This content first appeared in Possibilities newsletter.)

Will Bontrager