(untagged)

Create Password Text Box Like Windows 8 Style in Website

quiit

0.00/5 (No votes)

9 Apr 2013

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

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

<!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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here