Jul 20, 2013
5 mins read
by Todd Motto
Show/hide toggling for password inputs. Psswrd is a neat little script I’ve put together to aid in better user experience when users are completing your forms or actioning things inside web apps. For instance, instead of another irritating ‘confirm password’ field, we provide a ‘show password’ for them to double-check before signing up, logging in, filling out various ‘secret questions’, or whatever else you can think of.
Psswrd self-initiates when you tell it to, it doesn’t need calling like a regular plugin, it just watches for the data-init-psswrd attribute and will fire when ready. Configuring only takes a minute and you’re good to go.
You’ll probably have a form on your page to post the info back to the server, so you’ll need to init the plugin on it (though the init is limited to any element):
Then inside that, you’ll want to tell it what input fields to watch:
The structure of your form, however, is advised to be as follows to allow for optimal styling and structure:
The above uses the <label> element to provide a container for when the checkbox input and toggle text are appended inside. Psswrd takes care of the rest of things and your form will look like this:
I’ll talk through the main parts of what’s happening in the script, let’s start at the top:
Here I’m creating a constructor function for the plugin, in which I’ll tap into the prototypal inheritance features:
The above creates all the necessary elements and appends them to the this object, which as we loop through any configured elements, it creates a new instance of the function on each object.
Then it’d be wise to loop through the elements needed and create the new instance of the function on each element:
The if statement above checks if a NodeList is returned for the ‘data-init-psswrd’ selector, and if so, boots the plugin for us. The rest of this section merely loops through the ‘data-psswrd-toggle’ selector and applies our function to it, which does all the heavy lifting for us.
Next the onchange event needs to be listened to:
This onchange event does all the clever toggling using the ternary operator. After a clever selector which grabs the siblings (parentNode.childNodes) and returns them as a NodeList, I can then loop through them and track down the correct elements. Two elements in the NodeList will be the ones I want, I make this manual safety check as whitespace actually returns as a Node inside the NodeList, a potential snag if you never knew it was coming.
We make the necessary checks and then assign the onchange handler onto the checkbox.
Putting it all together in a logical order, we can then see the bigger picture:
I originally went for a <div> for the text holder, but instead used the <label> element so I could assign a for attribute and id to the paired checkbox and text, so the user’s experience is enhanced again as it allows them to select the text as well to toggle the field as sometimes checkboxes alone can be a challenge to click (and more time consuming).
Psswrd was built so you can have as many of the fields or even forms on the page, which means the possibilities are endless for whatever you’re setting out to achieve.
Learn Angular the right way
Join my online courses to fully master Angular, TypeScript and NGRX.