Click here to Skip to main content
Click here to Skip to main content

Create Password Text Box Like Windows 8 Style in Website

By , 9 Apr 2013
Rate this:
Please Sign up or sign in to vote.

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, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

quiit
Software Developer (Senior)
Vietnam Vietnam
Learning IT Technology since 2001, getting start as C++ developer since 2003. Taking a PHP/MySQL developer job since 2003 and building small/middle e-commercial website. Switching to C# and .NET framework since 2004. Getting Senior Software Engineer job at Nexcel company since 2009 and now is a Team Leader.
 
Working technologies: COM/COM++, E-commercial solutions with PHP/MySQL, Security, Enterprise application with .NET, MSSQL/MongoDB and Web Development.

Comments and Discussions

 
GeneralMy vote of 5 PinmemberNewton Carlos Dantas8-Apr-13 2:11 
GeneralMy vote of 5 Pinmemberalvas3-Apr-13 21:08 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140415.2 | Last Updated 9 Apr 2013
Article Copyright 2013 by quiit
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid