Create Password Text Box Like Windows 8 Style in Website

Quí Nguyễn NT

Rate me:

4.80/5 (7 votes)

9 Apr 2013CPOL

22.4K

370

A password text box with an eye at right edge, can click / touch to show password

Download pwdEye.zip - 1.8 KB

Introduction

I enjoy using Windows 8 and I see that there is a cool password text box, so I love to have copied one for web platform, using JavaScript and HTML.

Using the Code

To enable eye tool for any password text box, we just call this code when the document was ready

JavaScript

utils.pwdEye(elementId, width, height, marginRight); // width, height is eye icon's size

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Windows 8 style password text box</title>

    <style type="text/css">
        input.pwdTxt[type=text], input.pwdTxt[type=password], .pwdTxt
        {
        	font-size: 12px;
        	width: 160px;
        	padding: 2px;
        	margin: 2px;
        	vertical-align: middle;
        	font-family: sans-serif;
        }
    </style>

</head>
<body>
    <h3>Type your password here</h3>
    <div style="line-height: 23px">
        <label for="password">Password </label>
        <input id="password" class="pwdTxt" 
                    type="password" maxlength="40" />
    </div>

    <script type="text/javascript">
        var utils = {
            findPos: function (obj) {
                var curleft = curtop = 0;
                if (obj.offsetParent) {
                    do {
                        curleft += obj.offsetLeft;
                        curtop += obj.offsetTop;
                    } while (obj = obj.offsetParent);
                }
                return [curleft, curtop];
            },
            pwdEye: function (id, w, h, marginRight) {
                // Detect IE version
                var ie = (function () {
                    var undef, v = 3, div = document.createElement('div');

                    while (
                        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
                        div.getElementsByTagName('i')[0]
                    );
                    return v > 4 ? v : undef;
                } ());

                // Check password element
                var pwdTxt = document.getElementById(id);
                if (!pwdTxt) {
                    return;
                }

                // Right edge
                if (!marginRight) {
                    marginRight = 0;
                }

                // Get width and height of password text box to insert eye icon
                var width = pwdTxt.clientWidth;
                var height = pwdTxt.clientHeight;

                if (width == 0 && height == 0) { // For old IE
                    width = pwdTxt.offsetWidth;
                    height = pwdTxt.offsetHeight;
                }

                // Get position of password text box
                var pos = utils.findPos(pwdTxt);

                // Create eye icon
                var img = document.createElement("IMG");
                // So sorry iconfinder
                img.src = 'http://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/visible.png';
                img.style.left = (pos[0] + width - w - marginRight) + 'px';
                img.style.top = (pos[1] + (height - h) / 2 + 1) + 'px';
                img.style.position = 'absolute';
                img.style.cursor = 'pointer';
                img.style.width = w + 'px';
                img.style.height = h + 'px';
                img.style.display = 'none';

                // Handle visible status of eye icon
                pwdTxt.onkeyup = function () {
                    if (this.value != '') {
                        img.style.display = 'block';
                    }
                    else {
                        img.style.display = 'none';
                        if (ie >= 10) {
                            this.setAttribute("type", "password");
                        }
                    }
                }

                // For some old IE version, we need to create a mask text box
                var pwdTxtMask = null;
                if (ie < 10) { // Need to create a mask text box
                    pwdTxtMask = document.createElement("INPUT");
                    pwdTxtMask.setAttribute("type", "text");

                    pwdTxtMask.maxLength = pwdTxt.maxLength;
                    pwdTxtMask.style.display = 'none';
                    pwdTxtMask.className = pwdTxt.className;

                    // Append mask text box
                    pwdTxt.parentNode.insertBefore(pwdTxtMask, pwdTxt);

                    // Auto-copy value from password text box
                    pwdTxt.onchange = function (e) {
                        pwdTxtMask.value = this.value;
                    }
                }

                // Append eye icon
                pwdTxt.parentNode.appendChild(img);

                // Handle event
                img.onmousedown = img.ontouchstart = function (event) {
                    if (ie < 10) {
                        pwdTxt.style.display = 'none';
                        pwdTxtMask.style.display = 'inline';
                    }
                    else {
                        pwdTxt.setAttribute("type", "text");
                    }
                    return utils.absorbEvent(event);
                }
                img.onmouseup = img.onmouseout = img.ontouchend = function (event) {
                    if (ie < 10) {
                        pwdTxt.style.display = 'inline';
                        pwdTxtMask.style.display = 'none';
                    }
                    else {
                        pwdTxt.setAttribute("type", "password");
                    }
                    return utils.absorbEvent(event);
                }

                return img;
            },
            absorbEvent: function (event) {
                var e = event || window.event;
                e.preventDefault && e.preventDefault();
                e.stopPropagation && e.stopPropagation();
                e.cancelBubble = true;
                e.returnValue = false;
                return false;
            }
        }

        // Apply password eye for element with id 'password'
        utils.pwdEye('password', 20, 20, 1);
    </script>

</body>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Quí Nguyễn NT

Technical Lead

Vietnam

Learning IT Technology since 2001, I get started with C++ from 2003. I switch to C# and.NET framework since 2004. Now I am a NodeJS / .NET Core programmer on Azure.

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Create Password Text Box Like Windows 8 Style in Website

Introduction

Using the Code

License

Comments and Discussions