Show everyone my passwords

 

 Introduction

Every seen this fancy checkbox on mobile devices where you can make password fields visible? Well on a page for a desktop browser it doesn't really make sense. But hey, I'll show you how to do it anyway.

How it works

With the help of jQuery we collect all the password fields. It's just a text-input-field of type password. If we change the type from 'password' to 'text' all user input will be visible.

Requirements

jQuery

Code

    // global variable to undo what we've done
    var pwFields = undefined;

    // this function does the magic
    function togglePWFields() {
        if (!pwFields) {
            // finding all pw-fields
            pwFields = $("input[type=password]");
            $(pwFields).each(function () {
                // convert all those fields to text-fields
                $(this).attr("type", "text");
            });
        }
        else {
            $(pwFields).each(function () {
                // undo all
                $(this).attr("type", "password");
            });
            // reset stuff
            pwFields = undefined;
        }
    }